CODEWITHSUNDEEP
javascriptjqueryember.js
phteven
phteven

Reputation: 1383

How to show/hide a View in EmberJS

I want a View to be hidden on load, then when a user clicks on a link it will display the view. Can someone review my code and let me know what I have done 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/

Upvotes: 6

Views: 9213

Answers (2)

Abhaya
Abhaya

Reputation: 2136

Valuebinding for some reasons didnt work for me so observing 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'

Upvotes: -1

pangratz
pangratz

Reputation: 16143

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

Handlebars:

<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 about your naming conventions: classes should be named UpperCase and instances lowerCase. See blog post about this.

​

Upvotes: 10

Related Questions