Javascript Ractive.js在复选框值更改时动态选择一个选择选项

我有一个复选框来切换状态-给出一个真值或假值

如果该值为false，我想隐藏选择框。如果该值为true，我想显示选择框。这些都是“开箱即用”的工作，只是一些模板材料-我简单地做：

     {{#if fooState }}
    <select class="form-control" id="addFoo" value='{{selectedFoo}}'>
      <option selected disabled>Select Foo</option>
      {{#foo}}
      <option value="{{_id}}|{{title}}">{{title}}</option>
      {{/foo}}
    </select>
      {{/if}}

但是，如果我选择一个Foo选项。。。当我将fooState设置为false时，此选项保持选中状态。我想重置它-因此选择了第一个选项selectfoo-清空{{selectedFoo}}值

---

我试过用观察、观察和事件来做一些事情，但似乎不能完全做到这一点。当我将代码输入控制台时-我可以更改选择选项。。。但似乎无法在状态改变时触发它。

好的-所以我终于找到了答案。。。要做到这一点，我不依赖于数据绑定。。。我创建了一个新的on change事件，并将其添加到select

<select class="form-control" id="addFoo" on-change='selectedFoo' >
  <option></option>
</select>

ractive.on('selectedFoo' , function (event) {
    var resourceArray = event.node.options[event.node.options.selectedIndex].value // Get our selected Foo option
    resourceArray = resourceArray.split('|') 
     var FooData = {
     a1: resourceArray[0],
     a2: resourceArray[1],
     a3: 'foo'
    }
     data.foo.push(resourceData);
   });

因此，我需要在单击复选框时触发的事件中添加一些代码。那么如果fooState是真的。。。我们从Ractive节点列表中抓取选择框，而不是dom——这是一个虚拟dom，因此直接选择不起作用，而是通过索引选择第一个选项。我明白了。。。当元素被隐藏时，它在ractive.node列表中不再可用，这是非常有意义的，因为它没有被呈现到页面中，所以您必须在呈现它后立即捕捉它。当它被隐藏的时候，你不能对它采取行动——因为它不存在。我必须说，我爱你。。。我发现它比React/Angular或其他任何一种都要快得多。我喜欢！这可能会被某些人删掉，但制作这部电影的人太棒了。这让我的开发变得容易多了

ractive.on('fooStateToggle', function(event) {
    console.log(event)
        if (data.fooState) {
        // Reset our select box! This took me ****ing ages to figure out... but its so, so, simple!
        var addFooElem = ractive.nodes.addFoo;
        addFooElem.selectedIndex = 0;
    } else {
    .....
    }
});