Question

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

如果值为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时，此选项仍保持选中状态。我想重置它 - 所以选择了第一个选项（选择Foo） - 清空{{selectedFoo}}值。

我已经尝试过用观察和事件做的事情 - 但似乎很难理解这一点。当我将代码打入控制台时 - 我可以更改选择选项...但似乎无法从状态更改时触发它。

Answer 1

好的 - 所以我终于想通了......要做到这一点，我不要依赖于数据绑定......我创建了一个新的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);
   });

因此从事件中获取数据 - 然后手动将其推送到阵列上。这完全是自包含的 - 它只影响这个单一选择。现在做我需要的一切。

*擦除这个...它似乎打破了双向数据绑定。请参阅以上*

所以我正在观看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节点列表中获取选择框（而不是dom - 这是一个虚拟dom，所以直接选择不起作用）并选择第一个选项指数。一个问题......当elem被隐藏时，它在ractive.node列表中不再可用（因为它没有被渲染到页面中，因此非常有意义）所以你必须在渲染它时立即捕获它。当隐藏它时，你不能对它采取行动 - 因为它不存在。我必须说，我喜欢Ractive ......我发现它比React / Angular或任何其他人更快。我喜欢它！（这可能会被某人编辑出来 - 但制作这个的人很棒。它让我的开发变得更加容易！）

当复选框值更改时，Ractive.js会动态选择“选择”选项

1 个答案: