Zapętlanie się przez tablicę tablic w Emberzie

Question

Jestem trochę nowy i zagubiony odnośnie iteracji Ember.

próbuję skonstruować wybierz wewnątrz szablonu ember, jak:

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

Tutaj, stateArrays wygląda następująco:

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

Ale to wyrzuca błąd. Kiedy próbuję {{stateArray}}, otrzymuję ciąg znaków taki jak "1, Albama" ...

Jak osiągnąć powyższe w pojedynczej iteracji?

Answer 1

można przekonwertować tablicy tablic na tablicę obiektów:

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

Wtedy można go używać jako:

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

Zasadniczo nie możemy użyć składni jak stateArray[0] w szablonie.

UPDATE

Jeśli nie chcesz, aby utworzyć kolejną tablicę (mappedArray), można napisać pomocnika:

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

Następnie w szablonie:

<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

Nie, żebym uwielbiał tę technikę, ale możesz uzyskać dostęp do poszczególnych elementów w takiej tablicy:

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

Twiddle

Oszczędność konieczności pisania dodatkowego kodu.