6

条件付きハンドルバー内でブール論理を実行することは可能ですか？

今、私はコントローラー機能でこの振る舞いを偽装しているので、コントローラーになってしまいます

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>

そしてそれは機能しますか？

4

2 に答える 2

13

このハンドルバーヘルパーを試すことができるかもしれません:

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}}
于 2014-03-18T02:05:19.267 に答える
8

直接実行することはできませんが、少しの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}}。{{#if}}扱うため、ハンドルバーに一致するように真実性テストを調整することをお勧めします。

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

JavaScriptでは true と同じですが、それ以外はすべて true[]です。

デモ: http://jsfiddle.net/ambiguous/vrb2h/

于 2013-02-12T19:14:58.747 に答える