Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="https://raw.github.com/billysbilling/ember-animated-outlet-demo/master/public/js/vendor/ember-animated-outlet.js"></script>
<link rel="stylesheet" href="https://raw.github.com/billysbilling/ember-animated-outlet-demo/master/public/js/vendor/ember-animated-outlet.css">
<script type="text/x-handlebars">
    <header>I'm a header</header>
    <div id="main">{{animatedOutlet name="main"}}</div>
    <footer>This is the footer.</footer>
</script>
<script type="text/x-handlebars" data-template-name="index">
  <section>
      <h2>Index Content:</h2>
      {{#linkToAnimated 'first' animations="main:slideLeft"}}First{{/linkToAnimated}}
  </section>
</script>
<script type="text/x-handlebars" data-template-name="first">
    <section>
        <h2>First</h2>
        <p>This is the first template.</p>
        {{#linkToAnimated 'second' animations="main:slideLeft"}}Second{{/linkToAnimated}}
    </section>
</script>
<script type="text/x-handlebars" data-template-name="second">
    <section>
        <h2>Second</h2>
        <p>This is the second template.</p>
        {{#linkToAnimated 'first' animations="main:slideLeft"}}First{{/linkToAnimated}}
    </section>
</script>

CSS

body { margin: 10px; }
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
#main {
    position: relative;
    width: 300px;
    margin: 0 auto;
}
section {
    width: 100%;
}
header { margin-bottom: 10px; }
footer { margin-top: 10px; }

JavaScript

App = Ember.Application.create();

App.Router.map(function(){
    this.route('index', {path: '/'});
    this.route('first', {path: '/first'});
    this.route('second', {path: '/second'});
});
App.IndexRoute = Ember.Route.extend();
App.FirstRoute = Ember.Route.extend();
App.SecondRoute = Ember.Route.extend();
App.IndexView = Ember.View.extend();
App.FirstView = Ember.View.extend();
App.SecondView = Ember.View.extend();