javascript Handlebars 的 if 语句中的条件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21094459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:01:56  来源:igfitidea点击:

Condition in Handlebars' if statement

javascripthandlebars.js

提问by ThePianist

I'm getting to know Handlebars.js and I would have a question for the community. I know I have a lot more to learn and I'm on my way, but I'd like to see an example to this problem.

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

The array created in JS with the objects:

在 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"
}
];

The format is this because the JSON I receive from the server will look like the exact way, but now for testing I didn't want to make an ajax call.

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

The template:

模板:

<table>
        <thead>
        <tr>

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

        </tr>    
        </thead>
...

Because the objects are in an array, I have to loop firstly the array with {{#each}}then there comes a registered helper (I found on github) that help me get the key because I want to write only them to the thead.

因为对象在一个数组中,所以我必须首先循环数组,{{#each}}然后有一个注册的帮助程序(我在 github 上找到)帮助我获取密钥,因为我只想将它们写入顶部。

Without my if statement it works fine, fill in the thead with the keys, but because there are 2 objects, it prints out the names twice.

没有我的 if 语句它工作正常,用键填充 thead,但因为有 2 个对象,它打印出名称两次

My problem is that I want to print them only once and an if would solve my problem that checks if the index of the array is greater than 0 to stop printing out the data, but..

我的问题是我只想打印它们一次,如果可以解决我的问题,即检查数组的索引是否大于 0 以停止打印数据,但是..

.. Handlebars doesn't support conditional statements, so code like {{#if x > y}}isn't possible. What do you guys think would be the best solution for it?

.. Handlebars 不支持条件语句,所以类似的代码{{#if x > y}}是不可能的。你们认为最好的解决方案是什么?

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

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

        i++;

    return buffer;
});

Well, I tried to write a helper, but I think I did something wrong. My theory was that I give to my if the 'this' in the template as it (I think) points back to the array and then increase the ito check if the index of the array is > than 0, finally if it's true than send back a false - so I thought it will say to the if that don't run the code inside, but I though wrongly.

好吧,我试图写一个助手,但我认为我做错了什么。我的理论是,如果this模板中的“ ”(我认为)指向数组,然后增加它i以检查数组的索引是否大于 0,最后如果它为真,则返回给我一个错误 - 所以我认为它会说如果不在里面运行代码,但我虽然错了。

回答by veducm

As stated in this other SO answerand as @SimonBoudrias mentioned in his answer, since Handlebars 1.1.0, {{@first}}is natively supported by {{#each}}helper.

正如在陈述这个其他SO答案,因为和在他的回答中提到@SimonBoudrias,把手1.1.0{{@first}}是原生支持{{#each}}帮手。

Therefore, you can print all attribute names for the first object in an arrayby using only handlebars native helpers as follows:

因此,您可以仅使用 handlebars 本机助手来打印数组中第一个对象的所有属性名称,如下所示:

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

Additional note about adding conditional if statements to Handlebars:

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

Handlebarsis a logic-less templating systemso it does not include logical statements.

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

Still, if you want to do it using templates and Handlebars, you could solve this by writing a helper, as explained in this SO answer. In your case, the helper could be something like:

尽管如此,如果您想使用模板和 Handlebars 来完成此操作,您可以通过编写一个帮助程序来解决此问题,如此SO answer 中所述。在你的情况下,助手可能是这样的:

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

Then, you can call it in your template as follows to do something only if the index is equal to 0:

然后,您可以在模板中调用它,如下所示,仅当索引等于 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}}

回答by Simon Boudrias

Handlebars offers helpers when you're looping an array. I don't think you'll need any custom helpers.

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

  • {{ @index }}return the index (0, 1, 2...)
  • {{ @key }}return the key (Field, Type, etc)
  • {{ @first }}boolean to mark if this is the first row in the array
  • {{ @last }}boolean to mark if this is the last row in the array
  • {{ @index }}返回索引 (0, 1, 2...)
  • {{ @key }}返回键(字段、类型等)
  • {{ @first }}布尔值来标记这是否是数组中的第一行
  • {{ @last }}布尔值来标记这是否是数组中的最后一行