How to prevent EmberJS list from displaying deleted records?

Question

I am having problems getting my EmberJS/Ember-Data project to NOT display deleted records.

I have a route: users/route.js

export default Ember.Route.extend({
    model: function() {
        console.debug('UserRoute.model');
        return this.store.findAll('user');
    }
});

the template: users/template.hbs

<table class="table table-condensed table-hover" style="table-layout:fixed">
        {{#each model as |user|}}
            <tr {{action "editUser" user}} class={{user.status}}>
                <td>{{user.userid}}</td>
            </tr>
        {{/each}}
    </tbody>
</table>

The user route: user/route.js

export default Ember.Route.extend({
    actions: {
        deleteUser: function(user) {
            var record = this.modelFor('user');
            record.destroyRecord().then(() => {
                this.transitionTo('users');
            });
        },
    }
});

user template generates the deleteUser action.

Using Ember Inspector on the user model data with id 59

After calling destroyRecord:

the network transaction headers

and response payload from backend



Now the user record flags in the store

But the item continues to be displayed in the users route, allowing one to view and subsequently try to delete again only to receive the error:

What am I doing wrong!

Thanks, Barry

Answer 1

You have to send the success response status from the backend as 204 with empty body.

If you are using expressJS, the response will be only res.sendStatus(204);

Follow rest-api best practices http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api

Answer 2

I am not sure if this gonna work, but if I was you I would try:

var currentUser = this.modelFor('user');

store.find('user', currentUser.id).then(function (user) {
 user.deleteRecord();
  user.get('isDeleted'); // => true
  user.save(); // => DELETE to /users/:id
});

// OR
store.find('user', currentUser.id).then(function (user) {
  user.destroyRecord(); // => DELETE to /users/:id
});

Similar code can be found from official site: guides.emberjs.com/v1.10.0/models/creating-and-deleting-records/