Ember.js：削除後にデータテーブルコンポーネントから行を削除する

Question

Datatableを含むコンポーネントがあり、このコンポーネントはコントローラに '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); 
        })} 

// 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 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);のようにします。これは、受信したデータに変更があった場合にコンポーネントを更新し、再レンダリング時に呼び出されるすべてのコンポーネントライフサイクルフックも呼び出すはずです。あなたのケースで編集

はあなたが持っている場合は、あなたの敗走でmodelフックとsetUpControllerのためのコードを提供することができれば、コントローラ

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またはコントローラの属性を更新すると、それらの値に依存するコンポーネントの更新がトリガーされることを理解する必要があります。