Ember.js filterBy
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">
<h2>Welcome to Ember.js</h2>
<a href="#posts">Go</a>
{{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">
<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>
</script>
CSS
body {
font-family: sans-serif ;
font-size:2em;
line-height:150%;
}
JavaScript
App = Ember.Application.create();
/****************************************************
ROUTER AND STORE SETUP
****************************************************/
App.Router.map(function() {
this.resource('posts');
this.resource('post', { path: ':post_id'});
});
/****************************************************
MODELS
****************************************************/
/****************************************************
ROUTES
****************************************************/
App.PostsRoute = Ember.Route.extend({
model: function() {
return posts;
}
});
/****************************************************
CONTROLLERS
****************************************************/
App.PostsController = Ember.ArrayController.extend({
codePosts: Ember.computed.filterBy('model', 'category', 'Pizza')
});
/****************************************************
FIXTURES
****************************************************/
var posts = [{
category: 'Code',
id: 'cssbestpractices',
title: "CSS Best Practices",
date: {
weekday: "Friday",
month: "November",
day: "1",
year: "2013"
}
}, {
category: 'Code',
id: 'namingfiles',
title: "Naming Files",
date: {
weekday: "Thursday",
month: "October",
day: "24",
year: "2013"
}
}, {
category: 'Pizza',
id: 'seo-copy-block',
title: "SEO Copy Block",
date: {
weekday: "Tuesday",
month: "November",
day: "5",
year: "2013"
}
}];
/****************************************************
GLOBAL
****************************************************/