emberjs/data#4986

controllers.todo-list.js

import Ember from 'ember';

const {
  computed,
  get,
} = Ember;

export default Ember.Controller.extend({
  todos: computed('model', 'model.todos.[]', function() {
    return get(this, 'model.todos');
  }),

  hasTodos: computed('todos.[]', function() {
    return get(this, 'todos').length > 0;
  }),

  actions: {
    addTodo(todo) {
      const todos = get(this, 'todos');
      todos.createRecord({
        name: todo,
      });
      return false;
    },

    removeTodo(todo) {
      const todos = get(this, 'todos');
      console.log('todos:beforeRemoveObject', todos.toArray());
      todos.removeObject(todo);
      console.log('todos:afterRemoveObject', todos.toArray());
      this.store.unloadRecord(todo);
      console.log('todos:afterUnloadRecord', todos.toArray());
      // Re-get todos to demonstrate the issue
      const newTodos = get(this, 'model.todos');
      // Should fail before we get here
      console.log('newTodos:afterUnloadRecord', newTodos.toArray());
      return false;
    },
  },
});

models.todo-list.js

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

export default Model.extend({
  todos: hasMany('todo', {async: false})
});

models.todo.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')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('todo-list', { path: '/' });
});

export default Router;

routes.todo-list.js

import Ember from 'ember';

const DUMMY_TODO_LIST = {
  data: {
    type: 'todo-list',
    id: 42,
    attributes: {},
    relationships: {
      todos: {
        data: [{
          id: '123',
          type: 'todo',
        }],
      },
    },
  },
  included: [{
    type: 'todo',
    id: 123,
    attributes: {
      name: 'Figure out this bug',
    },
  }],
};

export default Ember.Route.extend({
  model() {
    this.store.pushPayload(DUMMY_TODO_LIST);
    return this.store.peekRecord('todo-list', '42');
  },

  // Creating the record this way, however, works just fine
  // model() {
  //   return this.store.createRecord('todo', {
  //     id: '42',
  //     todos: [],
  //   });
  // },
  // afterModel(model) {
  //   const todos = model.get('todos');
  //   return todos.createRecord({ id: '123', name: 'this works though' });
  // },
});

templates.application.hbs

{{outlet}}

templates.todo-list.hbs

<form {{action 'addTodo' newTodo on='submit'}}>
  {{input type='text' value=newTodo placeholder='Add todo'}}
  <input type="submit" value="Add todo" />
</form>
{{#if hasTodos}}
  <ul>
    {{#each todos as |todo|}}
      <li>
        {{todo.name}}
        <button {{action 'removeTodo' todo}}>Done</button>
      </li>
    {{/each}}
  </ul>
{{else}}
  <p>No todos</p>
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.13.1"
  }
}