How to update the UI immediately when a new record is added? Related to ember-cli-pagination

Question

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.

One issue has been reported in the repo of the addon related to this - https://github.com/mharris717/ember-cli-pagination/issues/89

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

EDIT

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

})

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

Can you post some code, specifically where/how you're getting the first page, the template where you're displaying the records, where/how you're creating the new record, and the model hook for whatever route you're in? — Tom Netzband

greenymaster69 greenymaster69 · Accepted Answer · 2015-11-19T22:03:30

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.

Is it working?

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

How to update the UI immediately when a new record is added? Related to ember-cli-pagination

EDIT

2 Answers