Ractive.js 在复选框值更改时动态选择 Select 选项

Question

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

如果值为 false，我想隐藏 select 框。如果值为真，我想显示 select 框。这一切都可以 'out of the box' 只用一些模板的东西 - 我简单地做：

     {{#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}}

但是，如果我 select Foo 选项...当我将 fooState 设置为 false 时，此选项仍然 selected。我想重置它 - 所以第一个选项 (select Foo) 是 selected - 清空 {{selectedFoo}} 值。

我试过用观察和事件做一些事情——但似乎不太明白这一点。当我将代码输入控制台时 - 我能够更改 select 选项...但似乎无法在状态更改时触发它。

Answer 1

好的 - 所以我终于想通了...为此，我不依赖数据绑定...我创建了一个新的更改事件并将其添加到 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);
   });

因此从事件中获取数据 - 然后手动将其推送到数组中。这是完全独立的 - 它只影响这个 select。现在做我需要的一切。

* 删除这个...它似乎打破了双向数据绑定。请看上面*

所以我正在观看 Ractive 视频 - 顿悟了！我有点在正确的区域四处乱窜 - 但做错了：

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 {
    .....
    }
});

所以我需要在单击复选框 (fooStateToggle) 时触发的事件中添加一些代码。然后如果 fooState 为真...我们从 Ractive 节点列表中获取 select 框（不是 dom - 这是一个虚拟的 dom，所以直接 select ion 不会工作）和 select 是索引的第一个选项。一个陷阱......当元素被隐藏时，它不再在 ractive.node 列表中可用（非常有意义，因为它没有被呈现到页面）所以你必须在它呈现后立即抓住它。当它隐藏时你不能对它采取行动——因为它不存在。我必须说，我喜欢 Ractive……我发现它比 React / Angular 或其他任何一个都快得多。我喜欢它！（这可能会被某人编辑掉 - 但制作这个的人很棒。它让我的开发变得更加容易！！）

Ractive.js 在复选框值更改时动态选择 Select 选项

Ractive.js dynamically choose a Select option when a checkbox value changes

javascript

ractivejs