JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

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

<script type="text/x-handlebars" data-template-name="landing">
    Content: Landing
</script>

<script type="text/x-handlebars" data-template-name="product">
    Content: Products
</script>

CSS

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

JavaScript

App = Ember.Application.create();

App.RootView = Ember.ContainerView.extend({
  elementId: 'wrapper',
  childViews: ['topnavView', 'contentView'],
  topnavView: Ember.View.extend({
    templateName: 'topnav',
    elementId: 'topnav'
  }),
  contentView: Ember.ContainerView.extend({
    elementId: 'content',
    currentView: Ember.computed(function(key, value) {
      var childViews = this.get('childViews'),
        currentView = childViews.objectAt(0);
      // getter
      if (arguments.length === 1) {
        return currentView;
      // setter
      } else {
        if (currentView) {
          childViews.removeAt(0);
          currentView.destroy();
        }
        childViews.insertAt(0, value);
        return value;
      }
    })
  })
});

App.LandingView = Ember.View.extend({
  classNames: ['landing'],
  templateName: 'landing' // Doesn't need to exist until view is created
});

App.ProductView = Ember.View.extend({
  classNames: ['product'],
  templateName: 'product' // Doesn't need to exist until view is created
});

App.stateManager = Ember.StateManager.create({
  initialState: 'root',
  states: {
    root: Ember.State.create({
      initialState: 'ready',
      ready:  Ember.State.create(),
      showingLanding: Ember.State.create({
        enter: function () {
          App.rootView.contentView.set('currentView', App.LandingView.create());
        }
      }),
      showingProduct: Ember.State.create({
        enter: function () {
          App.rootView.contentView.set('currentView', App.ProductView.create());
        }
      }),
      showLanding: function(manager, evt) {
        manager.goToState('showingLanding');
      },
      showProduct: function(manager, evt) {
        manager.goToState('showingProduct');
      }
    })
  }
});

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