Question

我有一个包含Datatable的组件，该组件发送一个动作＆＃39; deleteItem＆＃39;到Controller，以便按其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);。如果收到的数据有任何变化，这应该更新组件，并且还将调用在重新渲染时调用的所有组件生命周期钩子。

<强>被修改

在您的情况下，您必须为控制器设置新值

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或控制器属性会触发依赖这些值的组件的更新。

Ember.js：删除后从数据表组件中删除行

1 个答案: