Question

我想知道是否可以使用ractive.js＆＃39;使用嵌套迭代部分进行双向绑定。我需要的是迭代每个校准的answerOptions。我的模板如下所示：

matchers.add(new TokenMatcher("[a-z]+", Token.STRING));
matchers.add(new TokenMatcher("[0-9]+", Token.NUMBER));

目前发生的是所有输入都具有相同的绑定：

<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>

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

提前谢谢！

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中使用带双向绑定和迭代的单选按钮

1 个答案: