使用每个的把手模板

时间:2013-02-18 10:36:22

标签: javascript handlebars.js

我想只显示id =“firstTr-1”的第一个tr,但是它应该从同一个对象获取数据,而其他tr应该有除第一个之外的数据。应该添加任何注册表helper或者是一个内置的帮助器方法!!我检查了文档,但无法弄明白。

模板:

        <script id="firsttemp" type="text/x-handlebars-template">
        <tr id="firstTr-1">

        <td class="tableFirstCol"><input type="checkbox" class="check" id="childcheck" /></td>
        <td class="tableFirstCol"><input type="checkbox" class="star" id="childstar" /></td>
        <td class="tableFirstCol"><input type="checkbox" class="alarm" id="childalarm" /></td>
        <td class="tableFirstCol">Hero Honda<span>Hero Honda</span></td>

        </tr>
        {{#each objects}}
        <tr>

        <td class="tableFirstCol"><input type="checkbox" class="check" id="childcheck" /></td>
        <td class="tableFirstCol"><input type="checkbox" class="star" id="childstar" /></td>
        <td class="tableFirstCol"><input type="checkbox" class="alarm" id="childalarm" /></td>
        <td class="tableFirstCol">{{name}}<span>{{name}}</span></td>

        </tr>{{/each}}
</script>

JSON:

var company= [

        {
        "name": "Hero Honda",
        "lastprice": 310.2,
        "dayschange": 20.1,
        "dayshigh": 220.9,
        "volume": 140.3,
        "52weekhigh": 200.3,
        "name2": "herohonda",
        "dataset": [1200,3000,3200],
        "lastprice2": "1:10pm",
        "dayschange2": "8%",
        "dayshigh2": "1.5%",
        "volume2": "1:10 Pm",
        "52weekhigh2": "1:10 Pm"
        },
        {
        "name": "Hero Honda",
        "lastprice": 310.2,
        "dayschange": 20.1,
        "dayshigh": 220.9,
        "volume": 140.3,
        "52weekhigh": 200.3,
        "name2": "herohonda",
        "dataset": [3200,3500,5000],
        "lastprice2": "1:10pm",
        "dayschange2": "8%",
        "dayshigh2": "1.5%",
        "volume2": "1:10 Pm",
        "52weekhigh2": "1:10 Pm"
        }]

1 个答案:

答案 0 :(得分:2)

我认为你过于复杂。 Handlebars更喜欢在Handlebars看到之前将您的逻辑应用于数据。因此,不要乱用可能只在一个地方使用的自定义帮助程序,而是更改数据并使用布尔标记标记第一个数据,以便您可以在模板中执行简单的{{#if _first}}检查。 / p>

模板看起来像这样:

<script id="firsttemp" type="text/x-handlebars-template">
    {{#each objects}}
        <tr{{#if _first}} id="firstTr-1"{{/if}}>
            <!--...-->
        </tr>
    {{/each}}
</script>

你可以像这样设置_first标志:

company[0]._first = true;

演示:http://jsfiddle.net/ambiguous/3Cq9K/


一旦你解决了这个问题,你手上就会遇到另一个问题:你复制了复选框上的id属性,但是id attributes must be unique

  

必须不是文档中具有相同id值的多个元素。

如果您希望在未来避免各种奇怪且令人困惑的问题,则每个复选框都需要唯一的id