Come mostrare/nascondere una vista in EmberJS

Question

Desidero che una vista sia nascosta al caricamento, quindi quando un utente fa clic su un collegamento verrà visualizzata la vista. Qualcuno può rivedere il mio codice e farmi sapere cosa ho fatto di sbagliato?

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

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

Ecco la jsfiddle: http://jsfiddle.net/stevenng/uxyrw/5/

Answer 1

vorrei creare un semplice isVisibleBinding alla vista che si desidera nascondere/mostrare, vedi http://jsfiddle.net/pangratz666/dTV6q/:

Manubrio:

<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 sui tuoi convenzioni di denominazione: classi dovrebbero essere denominati UpperCase e le istanze lowerCase. Vedi blog post su questo.

Answer 2

valuebinding per alcuni motivi non ha funzionato per me così osservare proprietà parentView all'interno childView ha fatto il trucco per me

manubrio:

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