Handlebars 的 if 语句中的条件

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

模板：

\n\n

<table>\n        <thead>\n        <tr>\n\n        {{#each this}}\n           {{#only_once this}}\n            {{#key_value this}}\n                <th>{{key}}</th>      \n            {{/key_value }}\n            {{/only_once}}\n        {{/each}}\n\n        </tr>    \n        </thead>\n...\n

\n\n

因为对象位于数组中，所以我必须首先循环数组，{{#each}}然后有一个注册的助手（我在 github 上找到）帮助我获取密钥，因为我只想将它们写入到 head 中。

\n\n

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

\n\n

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

\n\n

.. Handlebars 不\xe2\x80\x99t 支持条件语句，因此像{{#if x > y}}\xe2\x80\x99t 这样的代码是不可能的。你们认为最好的解决方案是什么？

\n\n

Handlebars.registerHelper("only_once", function(item, fn){\n    var buffer;\n    var i = 0;\n\n    if (i > 0) {\n        buffer = false;\n    }\n\n        i++;\n\n    return buffer;\n});\n

\n\n

好吧，我试着写一个助手，但我想我做错了什么。我的理论是，我给this模板中的 if ，因为它（我认为）指向数组，然后增加 来i检查数组的索引是否大于 0，最后如果它s true 比发回 false - 所以我认为它会说如果不运行里面的代码，但我错了。

\n

Answer 1

正如另一个 SO 答案中所述以及 @SimonBoudrias 在他的答案中提到的，自Handlebars 1.1.0以来，助手{{@first}}本身就支持{{#each}}。

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

{{#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}}

关于向 Handlebars 添加条件 if 语句的附加说明：

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

不过，如果您想使用模板和 Handlebars 来完成此操作，您可以通过编写一个助手来解决这个问题，如这个SO 答案中所述。在你的情况下，助手可能是这样的：

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}}