在 ractive.js 中使用带有 2-way-binding 和迭代的单选按钮

Question

我想知道是否可以将 ractive.js 的 2-way-binding 与嵌套迭代部分一起使用。我需要的是对每次校准的 answerOptions 进行迭代。我的模板如下所示：

<script id="calibration-view" type="text/html">
<div id="calibrations">
    {{#each calibrations :num}}
    <div id="calibration">
        <div id="answer-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}}"

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

提前谢谢你！

Answer 1

最简单的方法是创建一个<Calibration> 组件，因为这会为name 绑定创建一个新上下文。不幸的是，在最新的稳定版本中存在一个错误，导致它无法正常工作 - 它已在边缘版本（将在不久的将来发布为 0.8）中修复，如下所示。

Ractive.components.Calibration = Ractive.extend({
  template: `
    <div class="calibration">
      <div id="answer-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>