手柄模板中的布尔逻辑

时间:2013-02-12 18:35:07

标签: javascript ember.js handlebars.js

是否可以在把手条件下执行布尔逻辑?

现在我用控制器功能欺骗这种行为,所以我最终得到了控制器

App.ApplicationController = Ember.Controller.extend({
    bool1: true,
    bool2: true,
    both: function(){ return this.bool1 && this.bool2; }.property('content.both'),
});

这允许我使用

的把手模板
<script type="text/x-handlebars">
  {{#if both}}
     <p> both were true </p>
  {{/if}}
</script>

并且工作正常,但会引发一些问题。首先,它模糊了正在发生的事情(特别是如果不使用好的功能名称)。其次,它似乎侵犯了MVC分离。

是否有可能按照

的方式做点什么
<script type="text/x-handlebars">
  {{#if bool1 && bool2}}  <!-- this will not actually work -->
     <p> both were true </p>
  {{/if}}
</script>

并且有效吗?

2 个答案:

答案 0 :(得分:11)

可能你可以尝试这个把手帮手:

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {

switch (operator) {
    case '==':
        return (v1 == v2) ? options.fn(this) : options.inverse(this);
    case '===':
        return (v1 === v2) ? options.fn(this) : options.inverse(this);
    case '<':
        return (v1 < v2) ? options.fn(this) : options.inverse(this);
    case '<=':
        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
    case '>':
        return (v1 > v2) ? options.fn(this) : options.inverse(this);
    case '>=':
        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
    case '&&':
        return (v1 && v2) ? options.fn(this) : options.inverse(this);
    case '||':
        return (v1 || v2) ? options.fn(this) : options.inverse(this);
    default:
        return options.inverse(this);
}

});

并像这样调用它:

 {{#ifCond showDistance "&&" distance}}
      <span class="distance">
          {{distance}}
      </span>
 {{else}}
      {{#if showRegion}}
           <span class="region">
           </span>
      {{/if}}
 {{/ifCond}}

答案 1 :(得分:7)

你不能直接做到这一点但是用一点arguments解析和一个可变辅助工具来解决它并不困难。像这样:

Handlebars.registerHelper('if_all', function() {
    var args = [].slice.apply(arguments);
    var opts = args.pop();

    var fn = opts.fn;
    for(var i = 0; i < args.length; ++i) {
        if(args[i])
            continue;
        fn = opts.inverse;
        break;
    }
    return fn(this);
});

然后在模板中你可以说:

{{#if_all a b c}}
    yes
{{else}}
    no
{{/if_all}}

您可以根据需要使用尽可能多的{{#if_all}}参数。您可能希望调整真实性测试以匹配Handlebars,因为{{#if}}处理

`false`, `undefined`, `null`, `""` or `[]` (a "falsy" value)

作为虚假而其他一切都是真实的,而[]在JavaScript中是真实的。

演示:http://jsfiddle.net/ambiguous/vrb2h/