ember.js - 添加新记录时如何立即更新 UI？与 ember-cli-pagination 相关

Question

在我们的应用程序中，有一个公司页面，它以分页方式列出了所有公司。我们使用 Ember 1.13 和 ember-cli-pagination 插件进行分页。数据来自 Rails API，所以我们使用 remote paginated API设想。现在一切正常，每页有 10 条记录，下一个和上一个按钮等。唯一的问题是当我们添加新记录时，记录已保存但它不会立即显示在 UI 上，我们必须刷新页面。我们的应用程序的其他部分没有分页，因此当我们添加新记录时，UI 会立即更新，无需任何刷新。

在与此相关的插件的 repo 中报告了一个问题 - 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 }),
.
.
.

});

路线/公司.js

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

Controller /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');
  });
},
}

})

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

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

  {{ page-numbers content=content }}

Answer 1

在 Controller 中放置一个观察者模型的内容长度:

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

开火了吗？如果不是，则意味着您创建了一条记录，但没有将其添加到 Controller 的模型中。您可以在创建记录后在 Controller 中手动执行此操作:

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

您的模型与公司列表相关联。像您一样添加新公司不会刷新您的模型(您不会重新加载路线)，因此不会刷新您的模板。尝试手动将新公司添加到 Controller 模型的内容中。

它在工作吗？

PS:您可以尝试将其直接推送到您的模型而不是其内容。