Assistente personalizzato Ember.js + Handlebags

Question

Sto cercando di implementare una semplice istruzione condizionale in Handlebars che cambia in base a un attributo nel mio controller.

Sono riuscito a venire con;

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

App.businessController.business si riferisce ad un oggetto del modello che ho creato e "stato" è un attributo. Di seguito è il modello.

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

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

Questo tutto funziona bene. Tranne quando i miei attributi del modello cambiano. Dalla console nel webkit .. se si digita ..

business.set ("stato", "test2"); per esempio - nulla cambia.

Se utilizzo altre istruzioni standard del manubrio come IF o UNLESS, il contenuto cambia in base all'aggiornamento degli attributi del modello.

Ovviamente sto facendo qualcosa di incredibilmente sbagliato e apprezzerei qualsiasi aiuto.

Answer 1

Il modo più semplice per eseguire questa operazione è disporre di una vista padre con una proprietà associata al valore del controller e alle viste figlio che hanno i nomi di stato specificati come proprietà. È quindi possibile definire una proprietà calcolata isVisible che alternerà automaticamente la visibilità della vista secondaria a seconda che corrisponda al valore corrente associato nella vista padre.

Il modello potrebbe essere simile:

<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> 

e il codice 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') 
}); 

Ecco un esempio jsFiddle lavoro: http://jsfiddle.net/ebryn/QAxPU/