How to show / hide view in EmberJS

Question

I want the view to be hidden during loading, and then when the user clicks on the link, it displays the view. Can someone look through my code and tell me what I did wrong?

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

Here is the jsfiddle: http://jsfiddle.net/stevenng/uxyrw/5/

Answer 1

I would create a simple isVisibleBinding view that you want to hide / show, see http://jsfiddle.net/pangratz666/dTV6q/ :

Rudders

 <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(); 

---

A note on your naming conventions: classes must have the name UpperCase and lowerCase instances. See the blog post about this.

Answer 2

Comparability for some reason did not work for me, so observing the parentView property inside childView did the trick for me

Handlebar:

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