Ember.js：刪除數據表組件後刪除行

Question

我有一個包含數據表的組件，此組件向Controller發送動作 'deleteItem'，以便通過其Id刪除特定項目。

問題是，當我從商店刪除一個項目的視圖不更新，所以我的問題是如何刷新數據表並在刪除後顯示更新的數據？

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); 
        })} 

//富-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 as |item|}} 
     <tr> 
     <td>{{item.title}}</td> 
     <td>{{item.description}}</td> 
     <td>{{item.category}}</td> 
     </tr> 
    {{/each}} 
    </tbody> 
</table> 

//foo-component.js

import Ember from '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); 
    } 
    } 
}); 

Answer 1

一旦你渲染HTML沒有它會自動更新。所以只要您的更改不會觸發組件來反映不會發生的更改。有一次，我必須解決類似的問題，如果我理解你是正確的。在您更新商店後，您可以調用的路線中有refresh方法。這將導致您的路線中的模型重新加載，呼叫beforeModel()，model()和afterModel()掛鉤。因此，當您更新數據存儲區時，可以使用sendAction()鉤子來觸發此類更改，請記住，如果您不能從任何操作調用refresh()，請調用actions對象之外的方法，並在其中調用this.refresh()。

如果您將數據從路由傳遞到控制器並最終傳遞到組件，或者直接從路由傳遞到組件，那麼這些工作就會發揮作用。但是，如果在將數據發送到此組件之前執行了您的路由中的操作，則反映此類更改的唯一方法是在執行此類操作後更新您傳遞給控制器​​的數據。例如像這樣this.controller.set('fooList', fooList);。如果收到的數據有任何更改，這應該更新組件，並且還會調用在重新呈現時調用的所有組件生命週期掛鉤。

編輯

你的情況，你必須設置新值控制器

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 you would update the values for your controller if refresh() does not help you 
        }, 

        (err) => { 
         console.log(err); 
        })} 

如果你可以在你的潰敗model鉤setUpController如果你有提供代碼，這將是更容易解釋。

至少您應該明白，更新model或控制器屬性會觸發依賴這些值的組件的更新。