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

发布于 2024-12-21 17:28:23 字数 873 浏览 2 评论 0原文

使用 handlebars.js 我想根据生成的 json 显示两个 html 块。

假设我想感谢我的用户在我的商店订购商品。我这样编写 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
};

无论“cost”的值是多少，{{#if costIsZero}} 似乎总是说实话。如果我注释掉助手本身，那么 costIsZero 就没有任何内容，它总是返回 false。

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

我是什么做错了什么？

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

原文

With handlebars.js I want to display two blocks of html depending of a resulting json.

Let's say I want to thanks my user for ordering items at my shop.
I write my handlerbars.js template like this :

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

I'm coding a simple helper for costIsZero like this :

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

When I mix it with the following json data :

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

Whatever the value of "cost" is the {{#if costIsZero}} seems always to be true.
If I comment out the helper itself, thus having nothing for costIsZero it returns always false.

All the code above is available as a JSFiddle there http://jsfiddle.net/gsSyt/

What I'm doing wrong ?

Maybe I'm hijacking the way handlebars.js work, but in that case, How should I implement my feature with handlebars.js ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

待＂谢繁草 2024-12-28 17:28:23

在计算诸如 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< /code>），因为您的测试是针对零的：

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

您可以在 http://jsfiddle.net/ 上使用这两个选项gsSyt/41/

Helpers are not invoked when evaluating an expression such as costIsZero.

You could create a custom helper that works as an alternative to if:

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

Which you would use like this:

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

Alternatively, you can use the stock if (or unless) since your test is against zero :

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

You can play with both options at http://jsfiddle.net/gsSyt/41/

回复收藏 0 原文

十雾 2024-12-28 17:28:23

试试这个：

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

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

Try this:

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

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

回复收藏 0 原文

~没有更多了~