петля внутри цикла не работает в руле

Question

Я использую ручки в моем проекте. У меня есть 2 объекта, которые собираются перейти к шаблонам ... только верхняя петля работает, внутренний цикл не работает.

Мой JS код

var ListCount =[{},{},{}]; 
var ListValues =[{height: "12"},{height: "13"},{height: "14"}]; 

Так я передаю это значение в шаблоне, как этот

<tbody id="flavandMapTable" class="table-body"> 
{{#each ListCount }} 
     <tr> <td class="column"> 
     <select class="input-option-call " > 
    <option>Select</option> 
     {{#each ListValues }}      
     <option value="{{height}}">{{height}}</option> 
     {{/each}}      
    </select> 
     </td> 
    </tr> 
    {{/each}}       

я могу иметь возможность получить 3 строки, но значения внутри строк не наступающем .Май я знаю, что я сделал неправильно

Answer 1

здесь является мой рабочий код,

var list = {} 
list.ListCount=[{height: "1"},{height: "2"},{height: "3"}]; 
list.ListValues=[{height: "12"},{height: "13"},{height: "14"}]; 

{{#each list.ListCount}} 
<tr> 
    <td class="column"> 
     <select class="input-option-call " > 
      <option>Select</option> 
       {{#each ../this/list.ListValues }} 
       <option value="{{height}}">{{height}}</option> 
       {{/each}} 
      </select> 
    </td> 
</tr> 
{{/each}} 

Answer 2

Я не очень-то знаком с handlebar.js, но вы можете попробовать это,

{{#each ListValues }}      
    <option value="{{this.height}}">{{this.height}}</option> 
{{/each}} 

Или сделать online demo вашего кода.

Обновлено попробовать это,

Шаблон

<tbody id="flavandMapTable" class="table-body"> 
{{#each ListCount}} 
    <tr><td class="column"> 
    <select class="input-option-call"> 
     <option>Select</option> 
     {{#each ../this/ListValues}} 
     <option>{{this.height}}</option> 
     {{/each}} 
    </select> 
    </td> 
    </tr> 
{{/each}} 
</tbody> 

Javascript

{ 
    "ListCount" :[{height: "1"},{height: "2"},{height: "3"}], 
    "ListValues" :[{height: "12"},{height: "13"},{height: "14"}] 
} 

http://tryhandlebarsjs.com/ Проверено на

Answer 3

Я считаю, что проблема связана с контекстом: самый внутренний each ищет ListValues внутри ListCount (внешний each).

Я никогда не использовал две переменные в качестве контекста, но если это был один контекст, как это:

{ 
    count: [ {}, {}, {} ], 
    values: [ 
     { height: 12 }, 
     { height: 13 }, 
     { height: 14 } 
    ] 
} 

... то сокровенное each бы {{#each ../values}} сообщить рули, что значения являются одним уровень выше текущего контекста (count).

jsFiddle here.

Answer 4

Руль будет работать только с одним Контекстом, то есть JSON. Он не будет работать с двумя JSON.

Так со ссылкой на @ssarabando, пример контекста.Вы можете изменить шаблон Handlebar следующим

Контекст:

{ 
    ListCount: [ {}, {}, {} ], 
    ListValues: [ 
     { height: 12 }, 
     { height: 13 }, 
     { height: 14 } 
    ] 
} 

Handebar Шаблон:

<tbody id="flavandMapTable" class="table-body"> 
{{#each ListCount}} 
     <tr> <td class="column"> 
     <select class="input-option-call " > 
    <option>Select</option> 
     {{#each ../ListValues}}      
     <option value="{{height}}">{{height}}</option> 
     {{/each}}      
    </select> 
     </td> 
    </tr> 
    {{/each}} 
</tbody>