如何在添加新记录时立即更新UI？与烬-cli分页有关

Question

在我们的应用程序中，有一个Company页面，它以分页的方式列出了所有的公司。我们正在使用Ember 1.13和烬-cli-分页副词进行分页。数据来自Rails API，因此我们使用的是远程分页API场景。现在一切正常，每个页面上有10个记录，下一个按钮和前面的按钮等等。唯一的问题是当我们添加一个新记录时，记录会被保存，但是它不会立即出现在UI上，我们必须刷新页面。在我们的应用程序的其他部分，我们没有分页，所以当我们添加一个新的记录，UI立即更新，没有任何刷新。

与此相关的addon的回购报告中有一个问题-- https://github.com/mharris717/ember-cli-pagination/issues/89。

我试过了但没成功。有什么建议吗？

编辑

模型/company.js

import DS from 'ember-data';
import Ember from 'ember';
import EmberValidations from 'ember-validations';
import Notable from './notable';

export default Notable.extend(EmberValidations, {
 // Attributes
companyName         : DS.attr('string'),
companyNotes        : DS.attr('string'),
.
.
.

// Associations
owner               : DS.belongsTo('user', { inverse: 'companiesOwned'    }),
assignedTo          : DS.hasMany('user', { inverse: 'companiesAssigned', async: true }),
.
.
.

avatar              : DS.belongsTo('attachment', { async: true }),
persons             : DS.hasMany('person', { async: true }),
.
.
.

});

路线/公司.

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
import RouteMixin from 'ember-cli-pagination/remote/route-mixin';

export default Ember.Route.extend(RouteMixin, AuthenticatedRouteMixin, {
 model: function(params) {
   return Ember.RSVP.hash({
      company         : this.findPaged('company', params),
      users           : this.store.findAll('user'),
      .
      .
      .
   });
},

setupController: function(controller, models) {
  this._super(controller, models);
  controller.set('model', models.company);
  controller.set('users', models.users);
  .
  .
  .
}
});

控制器/company.js

import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.Controller.extend({
    listView              : false,
    newCompany            : false,
    creatingCompany       : false,
    showingCompany        : false,
    editingCompany        : false,

    // Pagination
    queryParams: ['page', 'perPage'],
    pageBinding: 'content.page',
    perPageBinding: 'content.perPage',
    totalPagesBinding: 'content.totalPages',
    page: 1,
    perPage: 10,

    disableDelete : true,

actions: {
createCompany: function() {
  // debugger;
  var company = this.get('store').createRecord('company');
  this.set('company', company);
  this.set('editCompanyPane', true);
  this.set('disableDelete', true);
},

// Edit Company
editCompany: function(company) {
  this.set('company', company);
  this.set('editCompanyPane', true);
  this.set('disableDelete', false);
},

closeEditCompany: function() {
  this.get('company').rollback();
  this.set('editCompanyPane', false);
  this.set('disableDelete', true);
},

saveCompany: function(company) {
  var _this = this;

  company.save().then(function() {
    Ember.get(_this, 'flashMessages').success('company.flash.companySaveSucessful');
    _this.set('editCompanyPane', false);
  }, function() {
    Ember.get(_this, 'flashMessages').danger('apiFailure');
  });
},

// Delete Company
deleteCompany: function(company) {
  var _this = this;

  company.destroyRecord().then(function() {
    Ember.get(_this, 'flashMessages').success('company.flash.companyDeleteSucessful');
    _this.set('editCompanyPane', false);
  }, function() {
    Ember.get(_this, 'flashMessages').danger('apiFailure');
  });
},
}

})

模板只是每页10条记录的列表。与远程分页API示例完全相同。

  {{#each model as |company|}}
   <div class="col-md-3">
    {{partial 'companies/modal-view'}}
   </div>
  {{/each}}

  {{ page-numbers content=content }}

Answer 1

在控制器中对模型的内容长度设置一个观察者：

modelLengthObs: function () {
    alert('Model's count has changed');
}.observes('model.content.length')

是开火吗？如果不是，这意味着您创建了一个记录，但是没有将它添加到您的控制器模型中。您可以在创建记录之后在控制器中手动执行此操作：

this.get('model.content').pushObject('newRecord');

您的模型与公司列表相关联。添加一个像你这样的新公司不会刷新你的模型(你不会重新加载路径)，所以它不会刷新你的模板。尝试将新公司手动添加到控制器模型的内容中。

它起作用了吗？

PS :你可以试着直接把它推到你的模型上，而不是它的内容。

Answer 2

我也有同样的问题，这句话适用于我：

this.get('target.router').refresh();

我把它加到了hbs的控制器上：

export default Ember.Controller.extend(
{
    actions:
    {
        deleteSomething: function(someData)
        {   //do this
            $.get("/deleteSomething.php?some_data=" + someData );
            //and refresh
            this.get('target.router').refresh();

        }
    }
});

您可以通过代码示例这里找到一个引用。