Ember Starter Kit

by rlivsey

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
<script type="text/x-handlebars">
  <h2>Title: {{outlet "page-title"}}</h2>
</script>

<script type="text/x-handlebars" data-template-name="foos/title">
  Foos Title &rarr; {{outlet "title-details"}} &larr;
</script>

<script type="text/x-handlebars" data-template-name="foos/foo/title">
  Woo! Success!
</script>

CSS

/* Put your CSS here */
 html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function () {
    this.resource("foos", {path: "/"}, function() {
        this.route("foo", {path: "/"})
    })
});

App.FoosRoute = Ember.Route.extend({
    renderTemplate: function() {
      this.render("foos/title", {
        into: "application",
        outlet: "page-title"
      })
    }    
});

App.FoosFooRoute = Ember.Route.extend({
   renderTemplate: function() {
      this.render("foos/foo/title", {
        into: "foos/title",
        outlet: "title-details"
      })       
   }
});