Ember.js pre4 with v2.1 router

Based on latest version of Ember.js with the new router. (latest ember build from 2013-01-13) Also including latest master of Ember Data (2013-01-03)

by darthdeus

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.min.js"></script>
<script src="https://gist.github.com/raw/d484098852f9bdcab242/dbd5bf83dab55c2bf9c8d3606234163b04555f8b/ember-data-20130113.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts/index">
   Posts Index

  {{#each post in controller}}
	  {{#linkTo "post" post}}{{post.title}}{{/linkTo}}
  {{/each}}
  
  <a {{action "newPost"}} href="#">add new post</a>
</script>

<script type="text/x-handlebars" data-template-name="posts/post">
  This is a post: {{controller.title}}

  <a {{action "newPost"}} href="#">add new post</a>
</script>

<script type="text/x-handlebars" data-template-name="posts/new">
  create a new post here
</script>

JavaScript

App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 11,
  adapter: "DS.FixtureAdapter"
});

App.Post = DS.Model.extend({
  title: DS.attr("string")
});

App.Post.FIXTURES = [ { id: 1, title: "foo" } ];

App.Router.map(function() {
  this.resource("posts", { path: "/" }, function() {
    this.resource("post", { path: "/:post_id" });
    this.route("new", { path: "/new" });
  });
});

App.PostsRoute = Ember.Route.extend({
  events: {
    newPost: function() {
      // I know I can use {{linkTo}}, this is just for demo purposes
      this.transitionTo("posts.new");   
    }
  }
});

App.PostsIndexRoute = Ember.Route.extend({
  model: function() {
    return App.Post.find();
  }
});
App.PostsIndexController = Ember.ArrayController.extend();

App.ApplicationRoute = Ember.Route.extend({
  events: {
    foo: function() { alert(1); } 
  }
});