Javascript 带有Ractivejs的多步骤表单-检查收音机的状态

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

如果您在步骤1中选中选项1，则在步骤2中也会选中选项1（为什么？）

如果您在第一步选择产品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>

---

您必须获取要附加到正确对象的无线组值。对于此特定示例，这可能意味着将其放在options对象上：

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

这意味着初始段必须能够返回错误值：

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

别名可以避免多次引用

。/../name

和

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

---

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

非常感谢。它起作用了。你有办法回答我的第二个问题吗？：）在为您找到答案的过程中，我发现这里有一个潜伏的bug。当上下文更改时，输入无线电

名称

不会更新。让我缩小范围，在Github上提出一个问题。它试图找到预选收音机的解决方案。如果您选择radio 1和radio 2，请查看此项。如果您选择radio 1和radio 2，则该值位于选定的数组[0]，但如果您选择radio 3，则该值位于数组[1]中。您必须执行我提到的工作，才能使其正常工作：。问题是您是否想要跟踪。

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

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