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

【问题标题】：How to update the UI immediately when a new record is added? Related to ember-cli-pagination添加新记录时如何立即更新 UI？与 ember-cli-pagination 相关
【发布时间】：2017-04-04 03:27:39
【问题描述】：

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

在与此相关的插件的 repo 中报告了一个问题 - https://github.com/mharris717/ember-cli-pagination/issues/89

我试过了，但是没有用。有什么建议吗？

编辑

models/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 }),
.
.
.

});

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

controllers/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 }}

【问题讨论】：

您能否发布一些代码，特别是您在哪里/如何获得第一页、您在哪里显示记录的模板、您在哪里/如何创建新记录以及模型钩住你所在的任何路线？
@TomNetzband 添加了代码

标签： ember.js ember-cli

【解决方案1】：

在控制器中对模型的内容长度进行观察：

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

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

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

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

有效吗？

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

【讨论】：

哇！非常感谢@greenymaster69。那行得通。略有改进，ember 1.13 正在处理 this.get('model.content').pushObject(company._internalModel);
欢迎您！我也有很多问题弄清楚这种事情，模板只会在其模型发生变化时刷新，IE重新加载路由或直接将对象推送到模型中。尽情享受您的 ember js 任务吧！

【解决方案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();

        }
    }
});

您可以通过代码示例here 找到参考。

【讨论】：