Ember.js + Handlebars custom helper

Question

Estoy tratando de implementar una instrucción condicional simple en Handlebars que cambia en función de un atributo en mi controlador.

He logrado pensar;

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

App.businessController.business se refiere a un objeto modelo que he creado y "Estado" es un atributo. A continuación está la plantilla.

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

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

Todo esto funciona bien. Excepto cuando los atributos de mi modelo cambian. Desde la consola en webkit ... si escribo ..

business.set ("estado", "prueba2"); por ejemplo, nada cambia.

Si utilizo otras instrucciones de manubrio estándar como IF o UNLESS, el contenido cambia según cuándo actualizo los atributos del modelo.

Obviamente estoy haciendo algo increíblemente malo y agradecería cualquier ayuda.

Answer 1

La manera más fácil de hacerlo es tener una vista principal que tenga una propiedad vinculada al valor del controlador y vistas secundarias que tengan los nombres de estado especificados como una propiedad. A continuación, puede definir una propiedad calculada isVisible que alternará automáticamente la visibilidad de la vista secundaria dependiendo de si coincide con el valor actual vinculado en la vista principal.

La plantilla podría quedar así:

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

Y su código 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') 
}); 

Aquí está un ejemplo de trabajo jsFiddle: http://jsfiddle.net/ebryn/QAxPU/