Ember.js + Handlebars custom helper

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/