JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.1.min.js"></script>
<script type="text/x-handlebars" data-template-name="sampleView">
    This is "sampleView" with value: {{App.obj.value}}
</script>
<script type="text/x-handlebars" data-template-name="say-hello">
      Hello, <b>{{name}}</b>
    </script>
<script type="text/x-handlebars" data-template-name="anotherView">
    This is "anotherView" with value: {{App.obj.value}}
</script>
<script type="text/x-handlebars">
    <div>This value is nicely automatic updated: <div>{{App.obj.value}}</div></div>
    <br><br>
    <div>This is using a storyboard and is updated too: <div id="rootElement"></div>
    </div>
    <button type="button" onclick="App.obj.set('value', 'new value')">Update Value</button>
    <button type="button" onclick="App.toggleCards()">Go To Next Card</button>
</script>

JavaScript

window.App = Ember.Application.create();

App.obj = Ember.Object.create({value: "initial value"});
App.Views = {};

App.Views.card1 = Ember.ViewState.create({
  view: Ember.View.create({
      elementId: 'test-view',
      templateName: 'sampleView'
    })
});

App.Views.card2 = Ember.ViewState.create({
  view: Ember.View.create({
      elementId: 'test-view2',
      templateName: 'anotherView'
    })
});

App.Views.cardViewManager = Ember.StateManager.create({
  start: App.Views.card1,
  otherCard: App.Views.card2
});

App.toggleCards = function() {
  if(App.Views.cardViewManager.getPath('currentState.name') === '.start')
    App.Views.cardViewManager.goToState('otherCard')
  else
    App.Views.cardViewManager.goToState('start')
};