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'>
    <h2>Posts</h2>
    {{#each post in controller}}
        <li>{{post.title}} by {{post.author.name}}</li>
    {{/each}}
</script>

JavaScript

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

App.ApplicationAdapter = DS.ActiveModelAdapter.extend();

App.Router.map(function() {
  this.resource('posts');
  this.resource('authors');
});

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

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', {async: true})
});


// Posts mockJax
$.mockjax({
    url: "/posts",
    responseText: {
        posts: [
            { id: 1, title: "First Post", author_id: 1 },
            { id: 2, title: "Second Post", author_id: 1 }
        ]
    }
});

// Single Author post mockJax
$.mockjax({
    url: "/authors/1",
    responseText: {
        author: { id: 1, name: "Michael Jackson"}
    }
});