0

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

  1. 如果您在 step1 中检查 option1，则在 step2 中也会检查 option1（为什么？）
  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 );
});
4

1 回答 1

2

您必须将单选组值附加到正确的对象。对于这个特定示例，这可能意味着将其放在选项对象上：

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

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

于 2014-04-18T19:24:22.290 回答