Question

我有一个Handlebars帮助器，它接受一个数字并返回一个类名。我想仅在foobar存在时才运行帮助程序，因为它可能不存在。我最初的尝试是：

{{#each content}}
    <div class="other_class {{#if foobar}}{{my_helper foobar}}{{/if}}"></div>
{{/each}}

这不起作用，因为metamorph会在if帮助程序所在的位置插入脚本标记占位符。我的第二次尝试是：

{{#each content}}
    <div class="other_class {{my_helper foobar}}"></div>
{{/each}}

这也不起作用，因为当foobar不存在时，字符串"foobar"将传递给my_helper。

我知道正在执行{{unbound foobar}}将呈现值而不绑定它，因此没有脚本标记占位符。有没有办法以未绑定的方式使用if？

Answer 1

您可以创建一个计算属性并将其添加到视图的classNameBindings，请参阅http://jsfiddle.net/pangratz666/MvpUZ/：

App.MyView = Ember.View.extend({
    classNameBindings: 'omg'.w(),

    omg: function(){
        var foobar = Ember.getPath(this, 'content.foobar');
        return (foobar && foobar === 42) ? 'my-class-name' : null;
    }.property('content.foobar')
});

Answer 2

有一个帮手。它被称为unboundIf：请参阅documentation

你可以像这样使用它：

{{#unboundIf "content.shouldDisplayTitle"}}
  {{content.title}}
{{/unboundIf}}

表达式仅评估一次。

如何使用未绑定的属性作为带有Ember.js的模板中的if帮助器的参数？

2 个答案: