Ember Data Mockjax

by mehulkar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.js"></script>
<script src="http://ember.alexspeller.com/handlebars-1.0.0.js"></script>
<script src="http://ember.alexspeller.com/ember-latest.js"></script>
<script src="http://ember.alexspeller.com/ember-data-latest.js"></script>
<script type="text/x-handlebars">
    <div class="container">
        <h1>Ember Data Base Fiddle</h1>
        <div>{{outlet}}</div>
    </div>
</script>

<script type='text/x-handlebars' id='index'>
    <section id='instruction'>
        <p>Create a new author and a book with it</p>
        <button {{action 'createAuthor'}}>Create New Author</button>
    </section>
    <h2>List of Authors and their Books</h2>
    <ul>
    {{#each author in controller}}
        <li class='author'>
            <ul>
                {{#each post in author.posts}}
                    <li>
                        {{post.title}} by {{post.author.name}}
                        {{#if post.isNew}}(new record){{else}}(saved){{/if}}
                    </li>
                {{/each}}
            </ul>
        <button {{action 'save'}}>Save Author</button>
        </li>
    {{/each}}
    </ul>
</script>

CSS

#instruction {
    border: solid 1px #ccc;
    background-color: #eee;
    padding: 5px 10px;
}
button {
    font-size: 14px;
    cursor: pointer;
}

li.author {
    border: solid 1px red;
    margin-bottom: 10px;
}

JavaScript

window.App = Em.Application.create();

App.ApplicationAdapter = DS.ActiveModelAdapter.extend();
App.AuthorSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin,{
    attrs: {posts: {embedded: 'always'}},  
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('author');
    }
});

App.IndexController = Ember.ArrayController.extend({
    itemController: 'author',
    actions: {
        createAuthor: function() {
            var author = this.store.createRecord('author', {name: 'Mark Tawin'})
            
            // create hasMany records
            var post = this.store.createRecord('post', {
                title: 'Coldest Winter',
                author: author
            })
            
            // manually push it in so the author knows about it
            author.get('posts').pushObject(post);
        }
    }
});

App.AuthorController = Ember.ObjectController.extend({
    actions: {
        save: function() {
            var promise = this.get('content').save();
            promise.then(function(record) {
                console.log(record.get('posts.length') + ' posts');
                console.log(record.get('posts').mapProperty('isNew'));
            })
        }
    }
});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    author: DS.belongsTo('author', {async: true})
});

App.Author = DS.Model.extend({
    name: DS.attr('string'),
    posts: DS.hasMany('post')
});

// Author post mockJax, returns embedded hasMany objects
$.mockjax({
    url: "/authors",
    type: 'post',
    responseText: {
        author: {
            id: 1,
            name: 'Mark Twain',
            posts: [
                {
                    id: 1,
                    title: 'Coldest Winter'
                }
            ]
        }
    }
});

$.mockjax({
    url: "/authors",
    responseText: {
        authors: []
    }
});

$.mockjax({
    url: "/authors/1",
    responseText: {
        authors: {
  ...