ember.js - 如何在 Ember.js 模板中使用未绑定的属性作为 if 助手的参数？

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：查看文档

你可以像这样使用它：

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

表达式只计算一次。