Question

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

我有一个“事件”对象数组，其中包含一个值为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

RactiveJS具有相同名称attr的多个无线电

1 个答案: