Question

我对Ember迭代感到有点新的困惑。

我试图在ember模板中构建一个 select ，例如：

<select id="state_list">
  {{#each stateArrays as |stateArray|}}
    <option value={{stateArray[0]}}>{{stateArray[1]}}</option>
  {{/each}}
</select>

在这里，stateArrays看起来像是：

[[1, "Alabama"], [2, "Alaska"], [3, "Arizona"]]

但是，这会引发错误。当我尝试{{stateArray}}时，我得到的字符串就像"1, Albama" ...

如何在单次迭代中实现上述目标？

Answer 1

并非我喜欢这种技术，但您可以像这样访问数组中的各个元素

{{#each stateArrays as |stateArray|}}
    <option value={{stateArray.[0]}}>{{stateArray.[1]}}</option>
  {{/each}}

Twiddle

节省您必须编写额外代码的费用。

Answer 2

您可以将数组数组转换为对象数组：

mappedArray = [[1, "Alabama"], [2, "Alaska"], [3, "Arizona"]].map(function(array){
    return { num: array[0] , str: array[1] };
})

然后您可以将其用作：

<select id="state_list">
    {{#each mappedArray as |obj|}}
        <option value={{obj.num}}>{{obj.str}}</option>
    {{/each}}
</select>

基本上我们不能在模板中使用stateArray[0]之类的语法。

<强>更新

如果您不想创建另一个数组（mappedArray），可以编写帮助程序：

App.GetArrayItemHelper = Ember.Helper.helper(function(values) {
    var array = values[0], index = values[1];
    return array[index];
})

然后在你的模板中：

<select id="state_list">
    {{#each stateArrays as |stateArray|}}
        <option value={{get-array-item stateArray 0}}>{{get-array-item stateArray 1}}</option>
    {{/each}}
</select>

通过Ember中的数组数组循环

2 个答案: