通过Ember中的数组数组循环

Abh*_*bhi 5 javascript arrays ember.js

关于Ember迭代,我有点新鲜和困惑.

我正在尝试构建一个select内部ember模板,例如:

<select id="state_list">
  {{#each stateArrays as |stateArray|}}
    <option value={{stateArray[0]}}>{{stateArray[1]}}</option>
  {{/each}}
</select>
Run Code Online (Sandbox Code Playgroud)

在这里,stateArrays看起来像:

[[1, "Alabama"], [2, "Alaska"], [3, "Arizona"]]
Run Code Online (Sandbox Code Playgroud)

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

如何在单次迭代中实现上述目的?

vot*_*son 1

您可以将数组的数组转换为对象的数组:

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

然后您可以将其用作:

<select id="state_list">
    {{#each mappedArray as |obj|}}
        <option value={{obj.num}}>{{obj.str}}</option>
    {{/each}}
</select>
Run Code Online (Sandbox Code Playgroud)

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

更新

如果你不想创建另一个数组(mappedArray),你可以编写一个助手:

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

然后在你的模板中:

<select id="state_list">
    {{#each stateArrays as |stateArray|}}
        <option value={{get-array-item stateArray 0}}>{{get-array-item stateArray 1}}</option>
    {{/each}}
</select>
Run Code Online (Sandbox Code Playgroud)