Ember: Even after refresh some attributes in the model are not changed

Question

I am new to EmberJS, and facing problem with model data updation

Controller :

export default Ember.Controller.extend({
queryParams: ['jobid'],
jobid: null,
currentCount: null,

actions: {
 onOffToggle(e) {
  var isChanged = this.get('model.b.isChanged');
  this.set('model.b.enable', e.target.checked);
  this.set('model.b.isChanged', !isChanged);
  console.log(this.get('model.b.isChanged'))
},
iterationCountChange() {
  var currentCount = this.get('currentCount');
  var isCountChanged =
      (currentCount != this.get('model.b.count')) ? true : false;
  this.set('model.b.isCountChanged', isCountChanged);
}
}});

Route:

export default Ember.Route.extend({
ajax: Ember.inject.service(),

beforeModel: function (transition) {
this.jobid = transition.queryParams.jobid;
},
model(){
  return Ember.RSVP.hash({
    a:   this.store.queryRecord('a', {jobid: this.get("jobid")}),
    b: this.store.queryRecord('b', {id: this.get("jobid")})
 });
},
setupController: function(controller, model) {
  this._super(controller, model)
controller.set('currentCount', model.b.get('iterationCount'))
},

actions: {
 paramChange(a, b)
  Ember.$.ajax({
    url: "/rest/test",
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
       b: b,
       a: a
     })
   }).then(response => {
    this.refresh();
  })
},
error(error, transition) {
  if (error.errors[0].status == 404) {
    return this.transitionTo('not-found', { queryParams: {'previous': window.location.href}});
   }
  }
 }
});

Here in controller I am keeping track if some value have changed, and if they have changed then update the flag related to their change, these flags like isChanged and isCountChanged are the part of the model's data, after user cliks submit button , paramChange action is called and then a post call is made to update the db for respective property changes, and then this.refresh() is called to render the latest model data.

But the problem is, once isChanged and/or isCountChanged are changed from their default value, then they don't reset to the new value present in the model data, e.g. after refresh the value to both these flags should be reset to false but it comes always true, I checked the value in the setUpController hook for the values of these flags and it confirms to true.

According to me it has something to with the controller, since any value which is used in controller once is not resetting to new value coming after refresh.

Kindly help I am spent a lot of time in this and got nothing till now, do inform if any extra information is required.

Ember version: 2.6

Even the value of currentCount is not resetting, which is not updated in backend, all this is leading to update the backed as the flags for tracking updation are always true once a modification is made. — JSR29
In the model hook , I must be getting updated as in the Inspect the API call response shows the new data is received, I don't know to print the model details in model hook. — JSR29
controllers are singletons so their state is not reset during your application lifecycle. If you want this use a component or clean up yourself in setupController. — Lux
How using a component would help? Also it is okay to set the variables of controller to set, but my biggest concern is that why my model attributes are not refreshing. — JSR29
How are you initializing isChanged and isCountChanged? You claim these "are the part of the model's data". Are you storing these values in the database? If you set a debugger in the setupController, is your model data as you expect it? What is model.tunein? — mistahenry

cluisalvarado cluisalvarado · Accepted Answer · 2018-11-23T22:37:10

From docs,

Refresh the model on this route and any child routes, firing the beforeModel, model, and afterModel hooks in a similar fashion to how routes are entered when transitioning in from other route. The current route params (e.g. article_id) will be passed in to the respective model hooks, and if a different model is returned, setupController and associated route hooks will re-fire as well.

So, if your model data doesn't change, setupController() is not called. My approach is to have a custom method to update controller with model data. Then, I call this method from model() hook (for this.refresh()) and from setupController().

model() {
  return this.store.query(....).then(data => this.updateControllerData(data));
}

setupController(controller, model) {
  this._super(...arguments);

  this.updateControllerData(data);
}

updateControllerData(data = {}) {
  if (!this.controller) {
    return;
  }

  this.controller.setProperties(data);
}

Note that if setupController() is not fired, the controller data is always updated.

Ember: Even after refresh some attributes in the model are not changed

1 Answers