{{Quest 1}}: Orphaned ember data model cleanup

Level: Beginner

Supposing that you have an index route which displays a list of all records of book and another route that creates a record for the same, then the newly created record will also be displayed as an empty item. For example: https://ember-twiddle.com/5b3175b92732d04e6132040271d0b911?openFiles=templates.application.hbs%2C

EmberJS Cookbook is a valid book while there is an orphaned empty record displayed during listing!

Ember: Automatically destroy uncommited new model instance when navigating away from route

Since you are creating a new model it remains as an orphan and you need to manually destroy it (roll it back). This can be done in the route’s resetController hook. Something like below:

import Route from '@ember/routing/route';
import { get } from '@ember/object';
export default Ember.Route.extend({
  model() {
    return get(this, 'store').createRecord('some-model');
  },
  resetController(controller, isExiting) {
    if (isExiting) {
      get(controller, 'model').rollbackAttributes();
    }
  }
});

Refer: https://emberjs.com/api/ember-data/3.1/classes/DS.Model/methods/rollbackAttributes?anchor=rollbackAttributes

Version: 1.12+

PS: Clap if you liked, and don’t forget to follow me here: Abhilash or on Twitter @abhilashlr