在 ractive.js 中使用具有 2 向绑定和迭代的单选按钮

Using radio buttons with 2-way-binding and iteration in ractive.js

本文关键字：绑定 迭代 单选按钮 js ractive      更新时间：2023-09-26

我想知道是否可以将 ractive.js' 2 向绑定与嵌套迭代部分一起使用。我需要的是遍历每次校准的答案选项。我的模板如下所示：

<script id="calibration-view" type="text/html">
<div id="calibrations">
    {{#each calibrations :num}}
    <div id="calibration">
        <div id="answerswer-options-{{num}}">
            {{#each answerOptions}}}
            <label><input type="radio" name="{{bindThisValuePerAnswerOption}}" value={{id}}>{{option}}</label>
            {{/each}}
        </div>
    </div>
    {{/each}}
    <button on-click="submit">Submit</button>
</div>

当前发生的情况是，所有输入将具有相同的绑定：

name="{{bindThisValuePerAnswerOption}}"

我一直在尝试解决这个问题一段时间，希望有办法。

提前谢谢你！

最简单的方法是创建一个<Calibration>组件，因为这会为name绑定创建一个新的上下文。不幸的是，最新的稳定版本中有一个错误阻止了它的工作——它在下面使用的边缘版本（将在不久的将来以 0.8 的形式发布）中得到了修复。

Ractive.components.Calibration = Ractive.extend({
  template: `
    <div class="calibration">
      <div id="answerswer-options-{{num}}">
        {{#each answerOptions}}
          <label><input type="radio" name="{{selected}}" value={{id}}>{{option}}</label>
        {{/each}}
  	  </div>
    </div>
  `
});
var ractive = new Ractive({
  el: 'main',
  template: `
    <div id="calibrations">
      {{#each calibrations :num}}
    	<Calibration selected='{{selections[num]}}'/>
      {{/each}}
      <button on-click="submit">Submit</button>
	</div>
  
    <pre>{{JSON.stringify(selections)}}</pre>
  `,
  data: {
    selections: [
      'b', 'f'
    ],
    calibrations: [
      {
        answerOptions: [
          { id: 'a', option: 'A' },
          { id: 'b', option: 'B' },
          { id: 'c', option: 'C' }
        ]
      },
      {
        answerOptions: [
          { id: 'd', option: 'D' },
          { id: 'e', option: 'E' },
          { id: 'f', option: 'F' }
        ]
      }
    ]
  }
});
<script src='http://cdn.ractivejs.org/edge/ractive.min.js'></script>
<main></main>

相关文章：