model.unload() => FilteredRecordArray null values (working)

controllers.todo-list.js

import Ember from 'ember';

const {
  computed,
  get,
} = Ember;

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

  todos: computed('model', function() {
    return this.get('store').filter('todo', todo => {
      return get(todo, 'list.id') === get(this, 'model.id');
    });
  }),

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

  actions: {
    addTodo(todo) {
      get(this, 'store').createRecord('todo', {
        name: todo,
        list: get(this, 'model')
      });
      return false;
    },

    removeTodo(todo) {
      const todos = get(this, 'todos');
      todo.unloadRecord();
      todos.forEach(todo => {
        Ember.assert('should not have null todo', todo !== null);
      });
    },
  },
});

initializers.error.js

import $ from 'jquery';

export default {
  name: 'on-error',
  initialize(application) {
    Ember.onerror = function(error) {
      $('.error-section').append('<div>' + error + '</div>\n');
    };
  }
};

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'),
  list: belongsTo('todoList', { async: false })
});

router.js

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

const Router = Ember.Router.extend({
  location: 'none',
  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: {},
  },
  included: [{
    type: 'todo',
    id: 123,
    attributes: {
      name: 'Figure out this bug',
    },
    relationships: {
      list: {
        data: {
          id: '42',
          type: 'todo-list',
        },
      },
    },
  }],
};

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' });
  // },
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.error-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 100px;
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.error-section div {
  padding: 6px 14px;
}

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}}

<div class="error-section">
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "ENABLE_DS_FILTER": true,
    "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.12.2"
  }
}