Destroyed item returns to the template when a new item of the same type is created

Ember Data
1

I’ve been working on this for a couple of days to no avail. I’m trying to destroy a record in Ember (using Ember-Rails gem), but it keeps coming back! The only way to completely get rid of it is to refresh the page. I opened Ember Inspector and here’s what I noticed:

  • The Object is seemingly removed from the Array, as the length is ‘0’; however, when it is the only item on the page and it is deleted, it is removed from the Last Object, but remains in the First Object spot.
  • Once the item is deleted, it has the index value of -1. When it reappears and you attempt to delete it again, it says “Uncaught Error: Attempted to handle event deleteRecord on Blocmarks.Bookmark:ember588:null while in state root.deleted.saved.”
  • I checked the server logs and it is being deleted. I am returning a 204 code.

Here’s my controller code (destroyBookmark is the relevant action):

Blocmarks.BookmarksController = Ember.ArrayController.extend({
  needs: ['current_user', 'topic'],
  actions: {
    createLike: function(bookmark){
      controller = this;
      if (bookmark.get('likedByCurrentUser') == true){
        alert("Nope. You've already liked this once!");
      } else {
        this.store.find('bookmark', bookmark.id).then(function (bookmark) {
          var like = controller.store.createRecord('like', {bookmark: bookmark, likedByCurrentUser: true});
          like.save();
        });
      }
      bookmark.set('likedByCurrentUser', true);
    },
    destroyLike: function(bookmark, likes, user){
      this.store.find('like', {bookmark_id: bookmark.id, user_id: user.id}).then(function(likes){
        likes.objectAtContent(0).destroyRecord();
      });
    },
    destroyBookmark: function(bookmark) {
      bookmark.destroyRecord();
    },
    updateBookmarkToggleOn: function(bookmark){
      bookmark.set('isUpdating', true);
    },
    updateBookmark: function(bookmark, url){
      bookmark.set('url', url);
      bookmark.save();
      bookmark.set('isUpdating', false);
    }
  }
});

I’m using the default Ember route as Bookmarks are nested under an individual topic.

Is this a bug or am I doing something wrong?

2

@alexstophel hey man. I’ve the same problem. :confused: If you solve, post here, please!

3

I did a workaroung in my template and the deleted object isn’t displayed anymore.

{{#each item in model }}
     {{#unless item.isDeleted}}
         <tr> item.description</tr>  
     {{/unless}}
{{/each}}
4

A computed property on your array controller will do the trick. “Deleting” a model will not remove it from an array, you’re just changing the state of that model instance and it’s kept around.

App.BooksController = Ember.ArrayController.extend({
  activeModels: Ember.computed('content.@each.isDeleted', function () {
    return this.get('content').filterBy('isDeleted', false);
  })
});

If you’re dealing with a record array, you can likely use removeRecord/removeObject in the promise that destroyRecord returns on your model. That would eliminate having to filter.

1 Like
5

Yep! I ended up using removeObject to take it out of the array. Works great. I really like the computed property idea, though.

6

Wish I found this an hour ago, thanks guys:)