Simple starting point for Ember.js, using the new router API

Provides a skeleton Ember application that demonstrates common use cases. NOTE: Currently uses a > pre2 dev build that includes the new router API.

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://bitbucket.org/zgramana/ember-nuget/downloads/ember.js"></script>
<script src="http://www.mochaleaf.com/share/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="posts">
    {{#each post in controller}}
      {{#linkTo "post" post}}{{post.title}}{{/linkTo}}         
    {{/each}}
      {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="post">
    
    <ul>
    {{#each comment in filteredComments}}
        <li>{{comment.rank}} {{comment.description}} - isActive: {{comment.isActive}}</li>
    {{/each}}
     </ul>
      
      <button {{action "addComment"}} >Add New Comment</button>
      {{#linkTo post.index}}<button>All Comments in Post</button>{{/linkTo}}
      {{#linkTo post.active}}<button>Active Comments</button>{{/linkTo}}
      {{#linkTo post.inactive}}<button>Inactive Comments</button>{{/linkTo}}
    {{outlet}}
  </script>

CSS

a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

JavaScript

// APPLICATION
window.App = Ember.Application.create({
  ApplicationController: Ember.Controller.extend(),
  Router: Ember.Router.extend()
});

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

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    post: DS.attr('string'),
    comments: DS.hasMany('App.Comment')
});


App.Comment = DS.Model.extend({
  	post: DS.belongsTo('App.Post'),
    description: DS.attr('string'),
    isActive: DS.attr('boolean'),
    rank: DS.attr('number')
});

store = App.__container__.lookup('store:');

store.loadMany(App.Comment, [
  { id: 1, description: "Great post!", is_active: true, rank: 11 },
  { id: 2, description: "Post sucks.", is_active: false, rank: 5 },
  { id: 3, description: "Nice style", is_active: true, rank: 7 },
  { id: 4, description: "Horrible writing", is_active: false, rank: 9 },
  { id: 5, description: "Ember.js FTW", is_active: false, rank: 10 },
  { id: 6, description: "Get up get out n' get something", is_active: true, rank: 8 },
  { id: 7, description: "Great post!", is_active: true, rank: 1 },
  { id: 8, description: "Post sucks.", is_active: true, rank: 5 },
  { id: 9, description: "Nice style", is_active: true, rank: 3 },
  { id: 10, description: "Horrible writing", is_active: false, rank: 2 },
  { id: 11, description: "Ember.js FTW", is_active: false, rank: 4 },
  { id: 12, description: "Get up get out n' get something", is_active: true, rank: 6 }
]);

store.loadMany(App.Post, [
  { id: 1, title: 'Post 1 Title', post: 'Body of post 1', comments:[1,2,3,4] },
  { id: 2, title: 'Post 2 Title', post: 'text of post 2', comments:[5,6,7,8] },
  { id: 3, title: 'Post 3 title', post: 'text of post 3', comments:[9,10,11,12] }
]);


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


App.PostsRoute =...