车把，访问父每个循环变量答案

【问题标题】：handlebars, access to parent each loop variable车把，访问父每个循环变量
【发布时间】：2019-02-07 16:26:44
【问题描述】：

我有类似这里的代码。我想将输入名称设置为之前每个循环中的@index。

我可以以某种方式访问@previousIndex 吗？或者我可以将输入分配给在第二个每个循环之前创建的某种组，该组将在其中设置所有输入名称？

我收到的数据：

 questions:[  
  {  
     question:"How old are you?",
     answers:[  
        '16',
        '18',
        '20',
        '25',
        'other'
     ]
  },
  {  
     question:"How many kids do you have?",
     answers:[  
        '0',
        '1',
        '2',
        'other'
     ]
  }
]

hbs 代码：

{{#each questions}}
    <li>
        <h3 class='question'>{{this.question}}</h2>
        <div class='flexbox'>
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{@previousIndex}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>
    </li>
{{/each}}

【问题讨论】：

也许这会对你有所帮助stackoverflow.com/questions/38696860/…
解决了吗？检查下面的答案？成功了吗？
我发表我自己的答案。

标签： javascript html node.js handlebars.js

【解决方案1】：

当您使用#each 时，您会在@index 中获得索引，如果您想要previousIndex，为什么不直接使用parseInt(@index) - 1

你是这样做的：

var Handlebars = require('handlebars');

Handlebars.registerHelper("previous", function(value, options)
{
    return parseInt(value) - 1;
});

现在将您的 hbs 代码更新为：

{{#each questions}}
    <li>
        <h3 class='question'>{{this.question}}</h2>
        <div class='flexbox'>
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{previous @index}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>
    </li>
{{/each}}

希望这对你有用！

【讨论】：

【解决方案2】：

我无法为您提供 100% 有效的代码（当前未设置环境），但根据我之前使用车把的经验，我将尝试指导您找到可能的解决方案。

{{assign "previousIndex" 0}}
{{#each questions}}
    <li>
        <h3 class='question'>{{this.question}}</h2>
        <div class='flexbox'>
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{../previousIndex}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>
    </li>
    {{assign "../previousIndex" "{{@index}}"}}
{{/each}}

【讨论】：

【解决方案3】：

我必须像这里一样创建两个辅助函数。 Get 在这里是因为我无法通过简单地编写 {{myVariableName}} 直接从 .hbs 文件访问变量。 Hbs 文件现在看起来像这里。

<div class='flexbox'>
            {{assign "parentIndex" @index }}
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{get "parentIndex"}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>

帮手

assign: function(varName, varValue, options) {
    options.data.root[varName] = varValue;
}

get: function(varName, options) {
    return options.data.root[varName]
}

【讨论】：