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

Question

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

我有一个“事件”对象数组，其中包含一个值为 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 属性上时，它会非常不方便。有没有办法解决这个问题？数据来自服务器，可能每个事件都不一样，所以很麻烦。

请看这里演示问题的小提琴：

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