Reload ember model

Question

Hi I'm a little confused how ember works, I've got a app I'm creating which is to list tasks for a particular user. Here is my model:

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    location: DS.attr('string'),
    date: DS.attr('date'),
    archive: DS.attr('boolean'),
    user: DS.attr('string'),
});

That is for when i add a task to the task list. However for when I get all the tasks in my tasklist i use this in my route:

model: function () {    
        return this.store.findAll('task');   
    }

For my filtering of all the users for the tasks I've add this to my controller:

filteredModel: Ember.computed('model', function(){
        let model = this.get('model');

        return model.filter(function(item){
            return item.data.user == this.get('session.user.email');
        });

    }),

All of this works fine. However when I add a new task to the task list, it doesnt update my tasks list, so I have to reload my page. Can this be done automatically, without refreshing my page?

Answer 1

The Array returned by findAll is a live array and will always contain all records in the store. However your CP has a wrong dependency key. The dependency key should either include .[] or .@each.?, or it won't listen on array changes. Because you use the user property it should be [email protected]. Also you probably should add the current user to the dependency key.

Finally your CP can't work at all, because the this in the filter function is the this of the filter function, not the Controller. You should either use an arrow function or save the this to a variable.

Also item.data.user seems wrong, probably this should be item.get('user').

So the final CP is:

filteredModel: Ember.computed('[email protected]', 'session.user.email', function(){
    return this.get('model')
        .filter(item => item.get('user') == this.get('session.user.email'));
}),