Question

我有这样的代码。我想将每个循环的前一个输入名称设置为@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}}

Answer 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}}

希望这对您有用！

Answer 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}}

Answer 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]
}

把手，访问每个循环变量的父级

3 个答案: