Ember.js 20131217 Update

by Aaron Kahlhamer

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
  <script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="posts">
  <ul>
    {{#each codePosts}}
      <li>{{#link-to 'post' this}}{{title}}{{/link-to}}</li>
    {{/each}}
  </ul>
  </script>

  <script type="text/x-handlebars" id="post">

  <div class="page-header sub-header clearfix" style="float:left;padding-bottom:2em;width:100%;">
    <h1>{{title}}</h1>
    <span style="float: left; font-size: 10px; color: gray;">{{date.weekday}}, {{date.month}} {{date.day}}, {{date.year}}</span>
    <span style="float: right; font-size: 10px; color: gray;">4:02 PM</span>
  </div>
 {{rawhtml html}}

</script>

CSS

body {
    font-family: sans-serif ;
    font-size:1em;
    line-height:150%;
}

li {
    list-style:none;
}

JavaScript

App = Ember.Application.create();

/****************************************************
ROUTER AND STORE SETUP
****************************************************/

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


/****************************************************
HELPERS
****************************************************/

Ember.Handlebars.helper('rawhtml', function(value, options) {
  return new Handlebars.SafeString(value);
});

/****************************************************
ROUTES
****************************************************/

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return posts.findBy('id', params.post_id);
  }
});

/****************************************************
CONTROLLERS
****************************************************/

App.PostsController = Ember.ArrayController.extend({
    codePosts: Ember.computed.filterBy('model', 'category', 'Code')
});

/****************************************************
FIXTURES
****************************************************/

var posts = [{
	"category": "Code",
	"id": "cssbestpractices",
	"title": "CSS Best Practices",
	"date": { "weekday": "Friday", "month": "November", "day": "1", "year": "2013" },
	"html": "<li>\"Hello, I'm HTML!\"</li>"
}, {
	"category": "Code",
	"id": "namingfiles",
	"title": "Naming Files",
	"date": { "weekday": "Thursday", "month": "October", "day": "24", "year": "2013" },
	"html": "<li>Hello, I am HTML!</li>"
}, {
	"category": "Code",
	"id": "seo-copy-block",
	"title": "SEO Copy Block",
	"date": { "weekday": "Thursday", "month": "October", "day": "24", "year": "2013" },
	"html": "<li>Hello, I am HTML!</li>"
}, {
	"category": "Pizza",
	"id": "pizza-delivery",
	"title": "Pizza Delivery",
	"date": { "weekday": "Tuesday", "month": "November", "day": "5", "year": "2013" },
	"html":...