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

我对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 2

这是我的工作代码，

 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 3

我认为问题出在上下文中：最里面的each正在ListValues（最外面的ListCount）内搜索each。

我从未使用过两个变量作为上下文，但如果这是一个单独的上下文，就像这样：

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

...然后最里面的each将{{#each ../values}}通知车把这些值是当前上下文（count）的一级。

jsFiddle here。

Answer 4

Handlebar只能使用一个Context，即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>

循环内部循环不能在车把中工作

4 个答案: