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

Question

我有一个包含数据表的组件，该组件发送一个操作 向 Controller 发送“deleteItem”，以便通过其 ID 删除特定项目。

问题是，当我从商店中删除项目时， View 不会更新，所以我的问题是如何刷新数据表并在删除后显示更新的数据？

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，它就无法自动更新。因此，只要您的更改不会触发组件反射(reflect)就不会发生的更改。有一次我必须解决类似的问题，如果我理解正确的话。有refresh您可以在更新商店后调用 route 的方法。这将导致调用 beforeModel()、model() 和 afterModel() Hook 重新加载路由中的模型。因此，当您更新数据存储时，您可以使用 sendAction() 钩子(Hook)来触发此类更改，只需记住，如果您无法从任何操作中调用 refresh()，请调用方法在 actions 对象之外并调用 this.refresh() 。

如果您在不进行任何更改的情况下将数据从路由传递到 Controller 并最终传递到组件，或者直接从路由传递到组件，那么这应该有效。但是，如果在将数据发送到此组件之前在路由中执行了一些操作，则反射(reflect)此类更改的唯一方法是在执行此类操作后更新传递给 Controller ​​的数据。例如像这样 this.controller.set('fooList', fooList);。如果接收到的数据有任何变化，这应该更新组件，并且还将调用在重新渲染时调用的所有组件生命周期 Hook 。

已编辑

在您的情况下，您必须为 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 you would update the values for your controller if refresh() does not help you
                    },

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

如果您可以在路由中提供 model 钩子(Hook)和 setUpController 的代码(如果有的话)，那么解释起来会更容易。

至少您应该了解更新模型或 Controller 属性将触发依赖这些值的组件的更新。