Ember 0.9.4 Template

by krisselden

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
  {{#view App.ContainerView elementId="app" currentView="show"}}
    <button {{action toggle}}>{{buttonText}}</button>
    {{#view App.PaneView viewName="show"}}Showing{{/view}}
  {{/view}}
</script>

JavaScript

App = Ember.Application.create();

App.ContainerView = Ember.View.extend({
    toggle: function() {
        this.set('currentView', this.get('currentView') === 'show' ? 'hide' : 'show');
    },
    
    buttonText: function() {
        return this.get('currentView') === 'show' ? 'Hide' : 'Show';
    }.property('currentView').cacheable()
});

App.PaneView = Ember.View.extend({
  isVisible: Ember.computed(function() {
    return this.get('viewName') === this.getPath('parentView.currentView');
  }).property('parentView.currentView')
});

window.break = true;