RactiveJS 多个具有相同名称 attr 的收音机

Question

我的 Web 应用程序在使用 RactiveJS 和单选按钮时遇到了一些问题。

我有一个 "event" 对象数组，其中包含一个值为 1 或 0 的属性。然后对于每个事件，我呈现一个名为 Event 的组件并传入事件对象。然后在模板中我做这样的事情来显示单选按钮的初始状态：

<script id="Event" type="x-template">
    <input type="radio" value="1" name="{{evt.val}}" /> 1<br />
    <input type="radio" value="0" name="{{evt.val}}" /> 0<br /><br />
</script>

但是，由于我有多个事件，name 属性在很多地方都是重复的，并且被视为一组单选按钮，而不是多组。我知道这是浏览器的行为，但是当 ractive 绑定到 name 属性时，它会非常不方便。有什么办法可以解决这个问题吗？数据来自服务器，每个事件都可能不同，所以很麻烦。

请看这里 fiddle 这说明了问题：

http://jsfiddle.net/5x03cexd/4/

亲切的问候，

Answer 1

虽然我仍然认为使用无线电输入的 name 属性来保存当前从组中选择的值是一个相当糟糕的选择，但事实证明这是设计使然。甚至还有关于此的错误报告：https://github.com/ractivejs/ractive/issues/1937

这个问题已经解决了，他们提到了两个解决方法来让它工作，最简单的是将你的无线电输入包装在表单元素中以正确地确定它们的范围。

Ractive.components.Event = Ractive.extend({
   template: '#Event'
});

new Ractive({
 el: 'body',
  template: '#Calendar',
  data: function () {
   return {
     events: [{val: 1}, {val: 0}, {val: 1}, {val: 1}, {val: 0}]
    };
  }
});

<script src="http://cdn.ractivejs.org/0.7.3/ractive.js"></script>

<script id="Calendar" type="x-template">
    {{#each events}}
     <Event evt={{.}} />
    {{/each}}<br /><br />
    
    Only one element get's checked because the name attribute is duplicated...
</script>

<script id="Event" type="x-template">
    <form>
      <input type="radio" value="1" name="{{evt.val}}" /> 1<br />
      <input type="radio" value="0" name="{{evt.val}}" /> 0<br /><br />
    </form>
</script>

Fiddle

RactiveJS 多个具有相同名称 attr 的收音机

RactiveJS multiple radios with same name attr

javascript

ractivejs