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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With