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

RactiveJS multiple radios with same name attr

本文关键字：attr 无线电 RactiveJS      更新时间：2023-09-26

我的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/

亲切问候，

尽管我仍然认为使用无线电输入的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

相关文章：