Question

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

如果在步骤1中选中option1，则在步骤2中也检查option1（为什么？）
如果您在第一步中选择产品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]。这也使您能够提供现有的回复。

为了让无线电输入更新，我在更新之前导致该部分出现错误：

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'
            }
        }
    }
});

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

带有Ractivejs的多步骤表格 - 检查无线电状态

1 个答案: