Ember - destroyRecord is not a function on model object

Question

I have an action that passes a model object to the route to have it deleted. But when I call delete on that object, I get model.destroyRecord is not a function.

  model() {
    return this.store.findRecord('user', 980190980).then((user) => {
      return user.getPlaylists();
    }.bind(this));
  },

  <i class="fa-icon fa fa-trash" aria-hidden="true" {{action "deletePlaylist" playlist}} style="margin-top:10px"></i>

  deletePlaylist(playlist) {
    this.get('playlists').removeObject(playlist);
    playlist.destroyRecord();
  }

If I do:

this.store.findRecord('playlist', playlist.id).then(playlist => playlist.destroyRecord());

I get the following error:

Attempted to handle event 'pushedData' while in state root.deleted.inFlight

Answer 1

I would put a debugger; statement before your call destroyRecord() and check to see that the object type is an Ember Data model. I suspect that .getPlaylists() is not an DS.Model type and its a plain javascript object (POJO).

Your error root.deleted.inFlight indicates that theres an error saving your record and you cannot delete it if it cannot first be saved. Ember is trying to let you know its a dirty model, meaning it has changes and it has not been saved. http://emberjs.com/api/data/classes/DS.RootState.html

deleteRecord() will delete it from the store without calling the server and destroyRecord() will do the same as deleteRecord() and call the server to notify this record should be deleted from any persistent storage.

Also there are some issues with your code. The .bind() is not valid. The findRecord promise doesnt have proper error handling: http://emberjs.com/api/classes/RSVP.Promise.html

promise.then(function(value) {
  // on fulfillment
}, function(reason) {
  // on rejection
});