Cómo mostrar/ocultar una vista en EmberJS

Question

Quiero que una Vista se oculte durante la carga, y cuando un usuario hace clic en un enlace, se mostrará la vista. ¿Alguien puede revisar mi código y decirme qué he hecho mal?

App.parentView = Em.View.extend({ 
    click: function() { 
    App.childView.set('isVisible', true); 
    } 
}); 

App.childView = Em.View.extend({ 
    isVisible: false 
}); 

Aquí es el jsFiddle: http://jsfiddle.net/stevenng/uxyrw/5/

Answer 1

me gustaría crear un simple isVisibleBinding a la vista que desea ocultar/mostrar, ver http://jsfiddle.net/pangratz666/dTV6q/:

Manillar:

<script type="text/x-handlebars" > 
    {{#view App.ParentView}} 
     <h1>Parent</h1> 
     <div> 
      <a href="#" {{action "toggle"}}>hide/show</a> 
     </div>  
     {{#view App.ChildView isVisibleBinding="isChildVisible" }} 
      {{view Em.TextArea rows="2" cols="20"}} 
     {{/view}}   
    {{/view}} 
</script>​ 

JavaScript:

App.ParentView = Em.View.extend({ 
    isChildVisible: true, 

    toggle: function(){ 
     this.toggleProperty('isChildVisible'); 
    } 
}); 

App.ChildView = Ember.View.extend(); 

---

Una nota acerca de sus convenciones de nomenclatura: clases deben ser nombrados y UpperCase casos lowerCase. Ver blog post sobre esto.

Answer 2

Valuebinding por algunas razones no funcionó para mí, así la observación de la propiedad parentView dentro childView hizo el truco para mí

manillar:

<script type="text/x-handlebars" > 
    {{#view App.ParentView}} 
     <h1>Parent</h1> 
     <div> 
      <a href="#" {{action "toggle"}}>hide/show</a> 
     </div>  
     {{#view App.ChildView }} 
      {{view Em.TextArea rows="2" cols="20"}} 
     {{/view}}   
    {{/view}} 
</script>​ 

CoffeeScript:

App.ParentView = Em.View.extend 
    isChildVisible: true 
    toggle: -> 
    @toggleProperty 'isChildVisible' 
App.ChildView = Em.View.extend 
    isVisible: (-> 
    @get('parentView.isChildVisible') 
).property '_parentView.isChildVisible'