Ember.js + Handlebarsカスタムヘルパー

Question

コントローラの属性に基づいて変更される単純な条件文をHandlebarsに実装しようとしています。

私は思いついた。

Handlebars.registerHelper("businessVerificationState", function(state, block) { 
    var value = Ember.getPath(this, "state"); 
    if (value == state) { 
    return block(this); 
    } 
}); 

App.businessController.businessは、作成したモデルオブジェクトを参照し、「状態」は属性です。以下はテンプレートです。

<script type="text/x-handlebars"> 
    {{#with App.businessController.business}} 
    {{#exampleState "test1"}} 
     <p>Test 1</p> 
    {{/exampleState}} 

    {{#exampleState "test2"}} 
     <p>Test 2</p> 
    {{/exampleState}} 
</script> 

このすべての作品が盛り上がります。モデルの属性が変更された場合を除きます。 Webkitのコンソールから..入力した場合..

business.set（ "state"、 "test2"）;たとえば、何も変わりません。

IFやUNLESSのような他の標準的なハンドルバーの文を使用すると、モデル属性を更新するときに内容が変わります。

私は明らかに間違ったことをしていますし、助けていただければ幸いです。

Answer 1

これを行う最も簡単な方法は、コントローラの値にバインドされたプロパティを持つ親ビューと、プロパティとして指定された状態名を持つ子ビューを持つことです。子ビューの可視性を自動的に切り替えるisVisible計算されたプロパティを定義することができます。これは、親ビューで現在の値がバインドされているかどうかによって異なります。

<script type="text/x-handlebars"> 
    {{#view Ember.View currentStateBinding="App.businessController.business.state"}} 
    {{#view App.StateView stateName="test1"}} 
     <p>Test 1</p> 
    {{/view}} 

    {{#view App.StateView stateName="test2"}} 
     <p>Test 2</p> 
    {{/view}} 
    {{/view}} 
</script> 

そして、あなたのJSコード：

あなたのテンプレートは次のようになり

var App = Ember.Application.create(); 

App.businessController = Ember.Object.create({ 
    business: Ember.Object.create({ 
     state: 'test1' 
    }) 
}); 

App.StateView = Ember.View.extend({ 
    isVisible: function() { 
     return this.get('stateName') === this.getPath('parentView.currentState'); 
    }.property('parentView.currentState') 
}); 

をここで働いてjsFiddle例です：http://jsfiddle.net/ebryn/QAxPU/