Emberで配列の配列をループする

Question

Emberの反復については少し新しく混乱しています。

私は同じように、燃えさしテンプレート内選択を構築しようとしている：ここで

<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

あなたは、オブジェクトの配列に配列の配列を変換することができます：基本的に私たちは、テンプレートにstateArray[0]のような構文を使用することはできません

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

：

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

その後、としてそれを使用することができます。

UPDATE

あなたが別の配列（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> 

Answer 2

このテクニックは大好きではありませんが、このような配列の個々の要素にアクセスできます

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

Twiddle

あなたは余分なコードを書く必要がなくなります。