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

Question

我想知道是否可以使用 ractive.js' 嵌套迭代部分的双向绑定。我需要的是为每次校准迭代 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>

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

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

javascript

ractivejs