web-dev-qa-db-ja.com

ハンドルバー#ifで関数を使用することは可能ですか？

次のようなコントローラーオブジェクトがあります。

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

私の見解は次のようなものです。

{{#each MyApp.objController}}
  {{#if isValid}}
   <some markup>
   {{else}}
   <some other markup>
  {{/if}}
{{/each}}

Handlebarsのif条件は値と関数の両方を受け入れると想定していましたが、そうではないようです。それは実際に可能ですか、そして私はそれを間違っているだけですか？

ember.jshandlebars.js
15
Jay

isValidをpropertyとして定義する場合、カスタムのハンドルバーヘルパーを作成せずにifステートメントで使用できます。 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>​

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();

6
pangratz

Ifステートメントは、値が存在する場合と、それが偽の値（つまり、存在しない、0、空の文字列など）である場合にのみ比較するハンドルバーです。カスタムヘルパー関数を作成する必要があります。

あなたはこのようにそれを行うことができます

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

これにより、ブロックヘルパーが登録されます。渡した値が「有効」と評価された場合、現在のデータを含むヘルパーに続くテンプレートが返されます。有効と評価されない場合は、現在のデータを含むelseステートメントに続くテンプレートを返します。

次に、テンプレートで次のように使用できます

{{#each MyApp.objController}}
    {{#isValid validity}}
        <some markup>
    {{else}}
        <some other markup>
    {{/isValid}}
{{/each}}

それ以外の場合、ハンドルバーの精神を守り、「ロジックレス」テンプレートを実行する場合は、テンプレートをレンダリングする前に、そのデータが有効かどうかを示すフラグを設定し、フラグを使用する場合はハンドルバーを使用します。

このような場合や他の場合を処理するための汎用関数を設定することもできます。ジェネリックifの例については、 handlebars.js {{#if}}条件付きの論理演算子 の私の答えを参照してください（上記の答えと同様）

9
Nick Kitto