javascript - 使用 Ractivejs 的多步表单 - 检查 radio 状态

Question

我正在开发产品配置器。我使用 Ractivejs。
我有两个问题。

1. 如果您在步骤 1 中选中选项 1，那么在步骤 2 中选项 1 也会被选中(为什么？)
2. 如果您在第一步中选择产品 2，我需要一种隐藏蓝色的方法

模板:

{{#steps[currentStep].options:i}}
    <div class='radio'>
      <label>
        <input type='radio' name='group{{currentStep}}' id='radio{{currentStep}}{{i}}' value='option{{currentStep}}{{i}}'>
        {{name}}
      </label>
    </div>
{{/steps[currentStep].options}}
<button on-click='gotoStep: {{currentStep + 1}}'>next</button>

Javascript:

var ractive, stepsData;

stepsData = [
    { name: 'Products', options: [
        { name: 'Product 1', price: 100 },
        { name: 'Product 2', price: 120 }
    ]},
    { name: 'Color', options: [
        { name: 'Black', price: 0},
        { name: 'White', price: 5 },
        { name: 'Blue', price: 20 }
    ]}
];

ractive = new Ractive({
    el: '#template',
    template: '#tempMain',
    data: {
        steps: stepsData,
        currentStep: 0
    }
});

ractive.on( 'gotoStep', function ( event, step ) {
  this.set( 'currentStep', step );
});

Answer 1

您必须获取单选组值以附加到正确的对象。对于这个特定的示例，这可能意味着将其放入选项对象中:

{{#steps[currentStep].options:i}}
    <div class='radio'>
      <label>
          <input type='radio' name='{{../value}}' value='{{i}}'/>
        {{name}}
      </label>
    </div>
{{/}}

参见http://jsfiddle.net/x63VW/1/

更新:实际上，您应该考虑将答案移至单独的对象中。 (ractive 中存在一个错误，使该模板比所需的长度要长一些，接下来我将逐步介绍)。完整示例在这里:http://jsfiddle.net/x63VW/3/ .

{{# steps[currentStep] }}
    {{# { stepName: .name, options: options } }}
    {{#options:i}}
        {{# !exclude(stepName, name) }}
        <div class='radio'>
          <label>
              <input type='radio' name='{{responses[stepName]}}' value='{{name}}'/>
              {{name}}
          </label>
        </div>
        {{/}}
    {{/}}
    {{/}}
{{/}}

<button on-click='gotoStep: {{currentStep + -1}}'>prev</button>
<button on-click='gotoStep: {{currentStep + 1}}'>next</button>
<br>
responses:
{{#responses:r}}
    <li>{{r}}: {{.}}</li>
{{/}}

这里的关键是为每个步骤创建一个带有属性的响应对象:responses[stepName]。这还使您能够提供现有的回复。

为了更新 radio 输入，我在更新之前导致该部分出错:

ractive.on( 'gotoStep', function ( event, step ) {
  this.set( 'currentStep', null ); //workaround for bug
  this.set( 'currentStep', step );
});

这意味着初始部分必须能够返回错误值:

{{# steps[currentStep] }}
//this would throw:
{{# steps[currentStep].options }}

别名是避免 ../../name 和多次引用 steps[currentStep] 的一个好方法:

{{# { stepName: .name, options: options } }}

排除是通过过滤器功能进行管理的。除非你的逻辑非常简单，否则这是可能的。

ractive = new Ractive({
    el: '#template',
    template: '#tempMain',
    data: {
        steps: stepsData,
        currentStep: 0,
        exclude: function(stepName, optName){
            if(stepName==='Color' && optName=='Blue'){
                return this.get('responses.Products')==='Product 2'
            }
        }
    }
});

您可能会为步骤和答案以及要排除的内容创建某种类型的 map 。但这应该为您提供一种方法。