Ember Data Mockjax

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.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 by {{name}}</h2>
    {{#each post in posts}}
        <li>Post {{post.id}}</li>
    {{/each}}
    
    <p>
        <button {{action 'swapPosts'}}>
            Swap first and last posts
        </button>
    </p>
    
    <p>
        <button {{action 'addPost'}}>
            Add post
        </button>
    </p>
    <p>
        Changes in <code>.observes('posts'): {{postChanges}}
    </p>
    <p>
        Changes in <code>.observes('posts.[]'): {{postEachChanges}}
    </p>
</script>

JavaScript

/*

Hello guys,

We are updating our application to the last release of Ember Data (1.0.0-beta.12) and I'm getting an unexpected behavior when changing an item of a `hasMany` relationship.

With the previous versions of Ember Data (our last one was 1.0.0-beta.8), a change through the `replace` method would dispatch only a few observers, for each changing item, but now it is notifying a change the complete `ManyArray`.

Checking out the code, I found this in Ember Data:

```js
   Model.reopen({
      notifyHasManyAdded: function(key, record, idx) {
        var relationship = this._relationships[key];
        var manyArray = relationship.manyArray;
        manyArray.addRecord(record, idx);
        //We need to notifyPropertyChange in the adding case because we need to make sure
        //we fetch the newly added record in case it is unloaded
        //TODO(Igor): Consider whether we could do this only if the record state is unloaded
        this.notifyPropertyChange(key);
      },
```

Is that really necessary? I'm not sure that's the behavior expected by most of the applications, since this wouldn't happen for a simple array.

In our case, it is a issue because of our visual representation, we use  `Ember.computed.union` to prevent views from re-rendering when swapping objects inside a collection and it turns out now all the views are re-created when doing it.

*/

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('author', 1);
    },
    
    afterModel: function(model) {
         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:...