添加新记录时如何立即更新UI？与ember-cli-pagination相关 [英] How to update the UI immediately when a new record is added? Related to ember-cli-pagination

问题描述

在我们的应用程序中，有一个公司页面，它以分页的方式列出所有公司。我们正在使用Ember 1.13和ember-cli-pagination addon进行分页。数据来自Rails API，因此我们使用远程分页API 情景。一切都正常工作，每页10个记录，下一个和上一个按钮等。只有当我们添加新记录时，记录被保存，但不立即显示在UI上，我们必须刷新为此页面。我们的应用程序还有其他部分没有分页，所以当我们添加新的记录时，UI会立即更新，而无需刷新。

In our app, there is a Company page, which lists all the companies in paginated way. We are using Ember 1.13 and ember-cli-pagination addon for pagination. The data is coming from Rails API, so we are using remote paginated API scenario. Everything is working fine for now, 10 records on each page, next and previous buttons etc. Only problem is when we add a new record, the record is saved but it doesn't show up on the UI immediately, we have to refresh the page for that. There are other parts of our app where we don't have pagination, so when we add a new record, UI is updated immediately without any refresh.

一个问题已经在与 https://github.com/ mharris717 / ember-cli-pagination / issues / 89

我尝试过但没有起作用。任何建议？

I tried that but it didn't work. Any suggestions?

models / company.js

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

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

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示例完全相同。

Templates is just a list of ten records per page. Exactly same as Remote pagination API example.

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

  {{ page-numbers content=content }}

推荐答案

将观察者置于您的控制器中的模型的内容长度上：

Put an observer on your model's content length in your controller:

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

是否触发？如果不是，则表示您创建了一条记录，但没有将其添加到控制器的模型中。创建记录后，可以通过在控制器中手动执行此操作：

Is it firing? If it isn't it means you created a record but didn't add it to your controller's model. You can do this manually by doing this in your controller after the creation of the record:

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

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

Your model is associated with a list of companies. Adding a new company like you do isn't gonna refresh your model (you aren't reloading the route), so it isn't gonna refresh your template. Try manually adding the new company to your controller's model's content.

它是否正常工作？

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

PS : You can try pushing it directly to your model instead of its content.

这篇关于添加新记录时如何立即更新UI？与ember-cli-pagination相关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！