Ember.js Quotations in Fixture Data
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'});
});
/****************************************************
MODELS
****************************************************/
/****************************************************
HELPERS
****************************************************/
Ember.Handlebars.helper('rawhtml', function(value, options) {
return new Handlebars.SafeString(value);
});
/****************************************************
ROUTES
****************************************************/
App.PostsRoute = Ember.Route.extend({
model: function() {
return posts;
}
});
/****************************************************
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: "<p><p><li>\"Hello, I'm HTML!\"</li></p></[>"
}, {
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: "<li>Hello, I am...