Blog with Ember JS

Blog with Ember JS

by pudgecon

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.min.js"></script>
<script type="text/x-handlebars">
    <h1>Blog using Ember JS</h1>    
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts/index">
    <div class="pull-right">{{#linkTo 'posts.new'}}new blog{{/linkTo}}</div>
    <ul>
        {{#each controller}}
        <li>{{#linkTo 'post' this}}{{title}}{{/linkTo}}</li>
        {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="post">
    {{#linkTo 'posts'}}Back to Posts{{/linkTo}}
    <p>{{title}}</p>
    <p>by {{author}} at {{formatDate createdAt}}</p>
    
    <p>{{detail}}</p>
    
    <p>comments:</p>
    <ul>
        {{#each comments}}
        <li>{{author}}: {{detail}} at {{formatDate createdAt}}</li>
        {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="posts/new">
    {{#linkTo 'posts'}}Back to Posts{{/linkTo}}
</script>

CSS

ul, li {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    padding: 5px;
}
.pull-right { float: right; }
.pull-left { float: left; }
.list {
    float: left;
    width: 50px;
}
.list ul li a {
    text-decoration: none;
    color: blue;
}
.list ul li a.active {
    color: red;
    background: #eee;
}
.detail {
    float: left;
    margin-left: 10px;
}

JavaScript

App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

// store
App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

// models
App.Post = DS.Model.extend({
    title: DS.attr('string'),
    author: DS.attr('string'),
    detail: DS.attr('string'),
    createdAt: DS.attr('date'),
    
    comments: DS.hasMany('App.Comment')
});

App.Comment = DS.Model.extend({
    author: DS.attr('string'),
    detail: DS.attr('string'),
    createdAt: DS.attr('date'),
    
    post: DS.belongsTo('App.Post')
});

// fixtures
App.Post.FIXTURES = [
    { id: 1, title: 'post1', author: 'pudgecon', detail: 'content1', createdAt: new Date(), comments: [ 1, 2 ] },
    { id: 2, title: 'post2', author: 'pudgecon', detail: 'content2', createdAt: new Date(), comments: [ 3 ] },
    { id: 3, title: 'post3', author: 'pudgecon', detail: 'content3', createdAt: new Date(), comments: [ 4 ] }
];

App.Comment.FIXTURES = [
    { id: 1, author: 'visitor1', detail: 'nice' },
    { id: 2, author: 'visitor2', detail: 'nice' },
    { id: 3, author: 'visitor3', detail: 'nice' },
    { id: 4, author: 'visitor4', detail: 'nice' }
];

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

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('posts');
    }
});

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

App.PostsIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({
            controller: 'posts'
        });
    }
});

App.PostsNewRoute = Ember.Route.extend({
    model: function() {
        return App.Post.createRecord();
    }
});

// controllers
// App.PostsController = Ember.ArrayController.extend();

// helpers
Ember.Handlebars.registerBoundHelper('formatDate', function(date, options) {
    if (date) {
        return...