javascript - Ember.js : Remove row from datatable component after delete -

i have component contains datatable, component send action 'deleteitem' controller in order delete specific item id.

the problem when delete item store view isn't updated, question how can refresh datatable , show updated data after delete ?

controller.js

deleteitem(id){    var store = this.get("store");    store.findrecord('foo', id, {backgroundreload: false}).then(function(foo){                    foo.deleterecord();                   foo.save().then(                     () => {                       console.log(`done !`);                     },                      (err) => {                       console.log(err);                     })} 

// foo-component.hbs

{{yield}} <table class="table table-bordered table-hover">   <thead>     <tr>       <th>title</th>       <th>decription</th>       <th>category</th>     </tr>   </thead>   <tbody>     {{#each model |item|}}       <tr>         <td>{{item.title}}</td>         <td>{{item.description}}</td>         <td>{{item.category}}</td>       </tr>     {{/each}}   </tbody> </table> 

//foo-component.js

import ember 'ember';  export default ember.component.extend({    didinsertelement() {      this.$('table').datatable({       dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',       language: {         search: '<span>filter:</span> _input_',         lengthmenu: '<span>show:</span> _menu_',         manualrowmove: true,         paginate: {           'first': 'first',           'last': 'last',           'next': '→',           'previous': '←'         }       }     });      this.$('select').select2({       minimumresultsforsearch: infinity,       width: 'auto'     });   },    actions: {      deleteitem: function(id) {       this.sendaction("deleteitem", id);     }   } }); 

once render html there no way update automatically. long change not trigger component reflect changes not happen. there 1 time when had solve similar problem, , if understood correct. there refresh method in route can invoke after have updated store. cause models in route reloaded calling beforemodel(), model() , aftermodel() hooks. when update data store, can use sendaction() hook trigger such change, remember if cant call refresh() of actions, call method outside of actions object , invoke this.refresh() there.

that shoud work if passing data route without changes controller , component, or directly route component. if there operations perform in route before sending data component, way reflect such changes update data pass controller after executing such operations. instance this.controller.set('foolist', foolist);. should update component if there changes in data received, , call of component life-cycle hooks invoked on re-render.

edited

in case have set new values controller

deleteitem(id){    var store = this.get("store"); const self = this;    store.findrecord('foo', id, {backgroundreload: false}).then(function(foo){                    foo.deleterecord();                   foo.save().then(                     () => {                       console.log(`done !`);                       self.refresh();                       // here update values controller if refresh() not                     },                      (err) => {                       console.log(err);                     })} 

if provide code model hook , setupcontroller in rout if have, easier explain.

at least should understand updating model or controller attributes trigger updates on components rely on values.