Question

使用handlebars.js我希望显示两个html块，具体取决于生成的json。

假设我想感谢我的用户在我的商店订购商品。我像这样编写handlerbars.js模板：

<p>{{name}}</p>
{{#if costIsZero}}
  Can't find any order
{{else}}
    You bought {{cost}} items in our shop, thanks.
{{/if}}

我正在为costIsZero编写一个简单的帮助器，如下所示：

Handlebars.registerHelper('costIsZero', function(){
    return this.cost == 0
});

当我将它与以下json数据混合时：

var data = {
  "name":"foo",
  "cost": 9
};

无论“费用”的价值如何，{{#if costIsZero}}似乎总是如此。如果我注释掉了帮助器本身，因此没有任何成本，因为它返回总是假的。

上面的所有代码都可以作为JSFiddle http://jsfiddle.net/gsSyt/

使用

我做错了什么？

也许我正在劫持handlebars.js的工作方式，但在这种情况下，我应该如何使用handlebars.js实现我的功能？

Answer 1

在评估costIsZero等表达式时，不会调用助手。

您可以创建一个自定义帮助程序，作为if的替代方法：

Handlebars.registerHelper('ifCostIsZero', function(block) {
    if (this.cost == 0) {
        return block(this);
    } else {
        return block.inverse(this);
    }
});

您可以这样使用：

{{#ifCostIsZero}}
    Can't find any order
{{else}}
    You bought {{cost}} items in our shop, thanks.
{{/ifCostIsZero}}

或者，您可以使用股票if（或unless），因为您的测试是零：

{{#if cost}}
    You bought {{cost}} items in our shop, thanks.
{{else}}
    Can't find any order
{{/if}}

您可以在http://jsfiddle.net/gsSyt/41/

播放这两个选项

Answer 2

试试这个：

Handlebars.registerHelper('if', function(conditional, block) {
  if(this.cost == 0) {
    return block(this);
  } else {
    return block.inverse(this);
  }
})

http://jsfiddle.net/mZbtk/2/

Handlebars.js在#if语句中使用辅助函数

2 个答案: