Updates via store.push

controllers.application.js

import Ember from 'ember';

const { get, run } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  store: Ember.inject.service(),

  init: function() {
    this._super();
    
    let store = this.get('store');
    
    // setup some server state for folder
    let folder = run(() => store.push({
      data: {
        type: 'folder',
        id: '1',
        attributes: {
          name: 'My folder'
        }
      }
    }));
    
    // set some more server state, this time for item
    let item = run(() => store.push({
      data: {
        type: 'item',
        id: '2',
        attributes: {
          name: 'My item'
        },
        relationships: {
          parentFolder: {
            data: {
              type: 'folder',
              id: '1'
            }
          }
        }
      }
    }));
    
    // this is going to peek into the internals to demonstrate the
    //   state of the hasMany relationship
    let relationshipState = folder.hasMany('items').hasManyRelationship;
    
    // item has a folder and folder's items contains our item
    console.log({
      itemParentFolderId: get(item, 'parentFolder.id'),
      folderItemsLength: get(folder, 'items.length')
    });
    
    // if we were to now inspect the internal state of folder's items
    //   we would see that server state is and local state
    //   are the same
    console.log({
      serverItems: relationshipState.canonicalMembers.size,
      localItems: relationshipState.members.size
    });

    // locally delete item from folder
    run(() => {
      item.get('parentFolder').get('items').removeObject(item);
    });
    
    // the local deletion dirties item: it now has no folder
    //  it also dirties folder, it now has no items
    console.log({
      itemParentFolderId: get(item, 'parentFolder.id'),
      folderItemsLength: get(folder, 'items.length')
    });
    
    // if we were to now inspect the internal state of folder's items
    //   we would see that server state is correct and local state
    //   is also correct (local deletion is evident)
    console.log({
      serverItems: relationshipState.canonicalMembers.size,
      localItems: relationshipState.members.size
    });

    // update item with new server state
    run(() => store.push({
      data: {
        type: 'item',
        id: '2',
        attributes: {
          name: 'My item'
        },
        relationships: {
          parentFolder: {
            data: {
              type: 'folder',
              id: '1'
            }
          }
        }
      }
    }));
    
    // item now reflects server state, but we told folder
    //  that we've locally deleted item and we haven't
    //  updated it since
    console.log({
      itemParentFolderId: get(item, 'parentFolder.id'),
      folderItemsLength: get(folder, 'items.length')
    });
    
    // if we were to now inspect the internal state of folder's items
    //   we would see that server state is correct and local state
    //   is also correct (local deletion is still there)
    console.log({
      serverItems: relationshipState.canonicalMembers.size,
      localItems: relationshipState.members.size
    });
    
    // update server state for folder
    run(() => store.push({
      data: {
        type: 'folder',
        id: '1',
        attributes: {
          name: 'My folder'
        },
        relationships: {
          items: {
            data: [
              { type: 'item', id: '2' }
            ]
          }
        }
      }
    }));
    
    // folder now reflects server state as well
    console.log({
      itemParentFolderId: get(item, 'parentFolder.id'),
      folderItemsLength: get(folder, 'items.length')
    });
    
    // if we were to now inspect the internal state of folder's items
    //   we would see that server state is still correct and local
    //   state now reflects it. The update from the server overrode
    //   our local changes.
    console.log({
      serverItems: relationshipState.canonicalMembers.size,
      localItems: relationshipState.members.size
    });

    this.set('folder', folder);
  }
});

models.folder.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string'),
  items: hasMany('items', { inverse: 'parentFolder'})
});

models.item.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string'),
  parentFolder: belongsTo('folder', { inverse: 'items' })
});

serializers.application.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
items length {{folder.items.length}}
<br>
<br>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}