JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.7.1.js"></script>
<script type="text/x-handlebars" data-template-name="topnav">
    Top Navigation
    <button {{action showLanding target="App.rootView.contentView"}}>Show Landing Page</button>
    <button {{action showProduct target="App.rootView.contentView"}}>Show Products</button>
</script>

CSS

#topnav {
    position: absolute;
    top: 0; left: 0; right: 0; height: 30px;
    background-color:#ffe;
}
#content {
    position: absolute;
    top: 30px; left: 0; right: 0; bottom: 0;
    background-color:#eff;
}

JavaScript

App = Ember.Application.create();

App.RootView = Ember.ContainerView.extend({
    childViews: ['topnavView', 'contentView'],
    topnavView: Ember.View.extend({
        templateName: 'topnav',
        elementId: 'topnav'
    }),
    contentView: Ember.ContainerView.extend({
        elementId: 'content',
        landingView: Ember.computed(function() {
            return Ember.View.create({
                template: Ember.Handlebars.compile('Content: Landing')
            });
        }).cacheable(),
        productView: Ember.computed(function() {
            return Ember.View.create({
                template: Ember.Handlebars.compile('Content: Products')
            });
        }).cacheable(),
        showLanding: function() {
            var childViews = this.get('childViews');
            childViews.replace(0, childViews.length, [this.get('landingView')]);
        },
        showProduct: function() {
            var childViews = this.get('childViews');
            childViews.replace(0, childViews.length, [this.get('productView')]);
        }
    })
});

App.rootView = App.RootView.create();
App.rootView.append();