在Ember中循环遍历数组的数组

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, 阿拉巴马州"...

如何在单次迭代中实现以上内容？

- Abhi

Answer 1

虽然我不是很喜欢这种技术，但您可以像这样访问数组中的单个元素:

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

Twiddle

让您无需编写额外的代码。

- JonRed

---

我也对这个功能有同样的想法。使用它确实感觉很奇怪，但是这是在不向Ember应用程序添加任何代码的情况下访问特定数组元素最直接的技术。我在Ember网站上找不到任何关于此的示例，但您知道任何官方参考资料吗？ - dashdashzako

不好意思，我不能。我快速查看了一下文档，但没有找到任何相关内容。虽然在 Github 的问题中有很多提到它的参考资料，但只是顺带提及。 - JonRed

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>

- vothaison