Ember.js 如何在添加新记录时立即更新UI？与ember cli分页相关_Ember.js_Ember Cli

Ember.js 如何在添加新记录时立即更新UI？与ember cli分页相关

ember.js

Ember.js 如何在添加新记录时立即更新UI？与ember cli分页相关,ember.js,ember-cli,Ember.js,Ember Cli,在我们的应用程序中，有一个公司页面，以分页方式列出所有公司。我们正在使用Ember 1.13和Ember cli分页插件进行分页。数据来自Rails API，所以我们使用的是场景。目前一切正常，每页上有10条记录，下一个和上一个按钮等。唯一的问题是，当我们添加新记录时，记录会被保存，但它不会立即显示在UI上，我们必须为此刷新页面。我们的应用程序还有其他部分没有分页功能，所以当我们添加新记录时，UI会立即更新，而不会进行任何刷新附件回购协议中报告了一个与此相关的问题- 我试过了，但没用。有什么建

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

附件回购协议中报告了一个与此相关的问题-

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

编辑 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 }),
.
.
.

});

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

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

})

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

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

})

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

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

{{{{#每个模型作为|公司}
{{部分“公司/模式视图”}
{{/每个}}
{{页码内容=内容}

在控制器中的模型内容长度上放置观察者：

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

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

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

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

它起作用了吗

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

我也遇到了同样的问题，这一行对我很有用：

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();

        }
    }
});

您可以通过代码示例找到一个参考
 你能发布一些代码吗，特别是你在哪里/如何获得第一页，你在哪里显示记录的模板，你在哪里/如何创建新记录，以及你所处的任何路线的模型挂钩？@TomNetzband添加了代码哇！非常感谢@greenymaster69。成功了。稍有改进，ember 1.13正在处理这个.get（'model.content'）.pushObject（company.\u internalModel）；欢迎你！一、 同样，如果在解决这类问题时遇到很多问题，模板只有在其模型发生更改时才会刷新，即重新加载路由或直接将对象推入模型。享受你的余烬js任务的乐趣！