可以在Handlebars #if中使用功能吗?

Jay*_*Jay 14 handlebars.js ember.js

我有一个控制器对象,如:

MyApp.objController = Ember.ArrayController.create({
  init: function(data) {
    data.isValid = function() {
      return (data.validity === "valid");
    }
    this.pushObject(MyApp.MyObj.create(data));
  }
});
Run Code Online (Sandbox Code Playgroud)

我的观点是:

{{#each MyApp.objController}}
  {{#if isValid}}
   <some markup>
   {{else}}
   <some other markup>
  {{/if}}
{{/each}}
Run Code Online (Sandbox Code Playgroud)

我假设ifHandlebars 中的条件接受值和函数,但似乎并非如此.它真的有可能,而我只是做错了吗?

Nic*_*tto 9

Handlebars if语句只比较一个值是否存在,如果它是一个假值(即不存在,0,空字符串等).您必须编写自定义帮助程序函数.

你可以这样做

Handlebars.registerHelper('isValid', function (value, options) {
    if (value == "valid") {
        return options.fn(this);
    }
    return options.inverse(this);
});
Run Code Online (Sandbox Code Playgroud)

这会注册一个块助手.如果传入的值的计算结果为"valid",则返回辅助程序后面的模板和当前数据.如果它没有评估为有效,则返回else语句后面的模板和当前数据.

然后在您的模板中,您可以像这样使用它

{{#each MyApp.objController}}
    {{#isValid validity}}
        <some markup>
    {{else}}
        <some other markup>
    {{/isValid}}
{{/each}}
Run Code Online (Sandbox Code Playgroud)

否则,如果您想要遵守Handlebars的精神并执行"无逻辑"模板,请在渲染模板之前设置一个标志,指示该数据是否有效,然后使用带有标志的帮助器的把手.

您还可以设置一个通用函数来处理这个和其他情况.请参阅Handlebars.js {{#if}}Logical运算符中的答案,条件为泛型if的示例(类似于上面的答案)


pan*_*atz 6

如果您将其定义isValid为a property,则可以在if语句中使用它而无需创建自定义Handlebars助手,请参阅http://jsfiddle.net/pangratz666/Dq6ZY/:

把手:

<script type="text/x-handlebars" data-template-name="obj-template" >
    {{view Ember.TextField valueBinding="age" }}
    {{#if isValid}}
        Si Si.
    {{else}}
        Nope!
    {{/if}}
</script>?
Run Code Online (Sandbox Code Playgroud)

JavaScript:

App.MyObj = Ember.Object.extend({
    isValid: function() {
        return this.get('age') >= 18;
    }.property('age')
});

Ember.View.create({
    templateName: 'obj-template',
    controller: App.MyObj.create({
        age: 21
    })
}).append();
Run Code Online (Sandbox Code Playgroud)