Question

我开始了解Handlebars.js，我对社区有疑问。我知道我还有很多东西需要学习，而且我正在路上，但我想看看这个问题的一个例子。

在JS中使用对象创建的数组：

var data = 
[
{
    Field: "id",
    Type: "int(11)",
    Null: "NO",
    Key: "PRI",
    Default: null,
    Extra: "auto_increment"
},
{
    Field: "id2",
    Type: "int(131)",
    Null: "N3O",
    Key: "PR3I",
    Default: null,
    Extra: "auto_increment"
}
];

格式是这样的，因为我从服务器收到的JSON看起来就像确切的方式，但现在进行测试我不想进行ajax调用。

模板：

<table>
        <thead>
        <tr>

        {{#each this}}
           {{#only_once this}}
            {{#key_value this}}
                <th>{{key}}</th>      
            {{/key_value }}
            {{/only_once}}
        {{/each}}

        </tr>    
        </thead>
...

因为对象在一个数组中，我必须首先用{{#each}}循环数组然后有一个注册帮助器（我在github上找到）帮助我获取密钥，因为我只想写它们到thead。

如果没有我的if语句，它可以正常工作，请使用键填充thead，但因为有2个对象，所以它会打印出两次名称。

我的问题是我只想打印一次而if会解决我的问题，检查数组的索引是否大于0以停止打印数据，但是......

..句柄不支持条件语句，因此无法使用{{#if x > y}}之类的代码。你认为什么是最好的解决方案呢？

Handlebars.registerHelper("only_once", function(item, fn){
    var buffer;
    var i = 0;

    if (i > 0) {
        buffer = false;
    }

        i++;

    return buffer;
});

好吧，我试着写一个帮手，但我觉得我做错了。我的理论是，如果模板中的“this”（我认为）指向数组，然后增加i以检查数组的索引是否为＆gt ;比0，最后如果它是真的比发回一个假 - 所以我认为它会说，如果不运行代码里面，但我错了。

Answer 1

正如this other SO answer和@SimonBoudrias在回答中提到的那样，由于 Handlebars 1.1.0 ，{{@first}}由{{#each}}助手本身支持。< / p>

因此，您可以打印数组中第一个对象的所有属性名称，只使用句柄本机帮助程序，如下所示：

{{#each array}}
    {{#if {{@first}}}}
        <!-- It is the first object on the array, print the key for each attribute -->
        {{#each this}}
            <th>{{@key}}</th>
        {{/each}}
   {{/if}}
{{/each}}

关于向句柄添加条件if语句的其他说明：

Handlebars 是无逻辑模板系统，因此它不包含逻辑语句。

但是，如果你想使用模板和Handlebars来做，你可以通过写一个帮助器来解决这个问题，如SO answer中所述。在您的情况下，帮助程序可能是这样的：

Handlebars.registerHelper('ifIsZero', function(value, options) {
  if(value === 0) {
    return options.fn(this);
  }
  return options.inverse(this);
});

然后，您可以在模板中按如下方式调用它，只有在索引等于0时才能执行某些操作：

{{#each array}}
    {{#ifIsZero {{@index}}}}
        <!-- @index is equal to 0, do something -->
        <!-- eg. print the key for each attribute of the object using {{@key}} -->
        {{#each object}}
            <th>{{@key}}</th>
        {{/each}}

    {{else}}
        <!-- otherwise, do something else -->

    {{/ifIsZero}}
{{/each}}

Answer 2

当您循环数组时，Handlebars会提供助手。我认为你不需要任何自定义助手。

{{ @index }}返回索引（0,1,2 ......）
{{ @key }}返回密钥（字段，类型等）
{{ @first }}布尔值，用于标记这是否是数组中的第一行
{{ @last }}布尔值，用于标记这是否是数组中的最后一行

Handlebars'if语句中的条件

2 个答案: