CODEWITHSUNDEEP
javascriptember.jsember-dataember-cliember-easy-form
VelNaga
VelNaga

Reputation: 3953

Ember How to retain query parameters while manually refreshing the page?

I am using ember 2.7.0.while manually refreshing the page ember clears the ember-data as well us query parameters, so i am unable to load the page in setupController while refreshing. Is there any possible way to retain both model & query parameters, at least retaining query parameter would be fine to reload my page.

route.js

model(params) {   
  return this.store.peekRecord("book",params.book_id);
},

setupController(controller,model,params){
  if(!model){
    //fetch book record again if the model is null
  }
  controller.set('isdn',params.queryParams.isdn);
  controller.set('book',model);
}

Any help should be appreciable.

Edited setupController as per Adam Cooper comment :

setupController(controller,model,params){
var isdn = params.queryParams.msisdn;
controller.set('isdn',isdn);
if(!model){
  this.store.findRecord('book', isdn).then((customer) => {
  this.set('book',customer);
},(resp,status) => {
  this.set('errorMessage', `Book with this ${isdn} does not exist.`);
  this.set('book', []);
});
}else{
  controller.set('device',model);
}
}

Page gets rendered before "findRecord" returning promise.Is there any way to stop page rendering till find record resolves the promise?

Upvotes: 1

Views: 1096

Answers (3)

Ember Freak
Ember Freak

Reputation: 12872

You are setting in route properties instead of controller..

setupController(controller, model, params){
var isdn = params.queryParams.msisdn;
controller.set('isdn', isdn);
if(!model){
    this.store.findRecord('book', isdn).then((customer) => {
    controller.set('book', customer);
}, (resp, status) => {
    controller.set('errorMessage', `Book with this ${isdn} does not exist.`);
    controller.set('book', []);
});
}else{
    controller.set('device', model);
}

}

Only the controller properties will decorate template.

You can even try the below, why don't you give opportunity to model hook to resolve since that will wait for the Promises to resolve.

model(params) {   
    var result = this.store.peekRecord("book",params.book_id);
    if(result !== null){
       result= this.store.findRecord('book', params.book_id)
    }
  return result;
}
setupController(controller,model){    
    controller.set('book',model);
}

Upvotes: 1

wallop
wallop

Reputation: 2571

"manually refreshing the page ember clears the ember-data as well us query parameters"

Once you completely refresh the browser, a new ember app instance is created and hence ember-data cannot be retained. Ember-data is just for the app on the UI, once ember is exited it will not be retained.

"as well us query parameters"

your query params are part of your url and it should not get cleared. Make sure the below two are present

Include queryParams in ur controller i.e.

queryParams: ['param1', 'param2']

And in your route make sure you have done

queryParams : {
    param1: {
      refreshModel: true
    },
    param2: {
      refreshModel: true
    }
}

"Page gets rendered before "findRecord" returning promise"

You are not doing something right, is the adapter, model, serializer etc defined correctly(if required) in order to use findRecord? Just to debug return a plain object and make sure ur setupController is called before rendering. i.e.

model() {
  return {dummy: 'dummy'};
}

Upvotes: 1

Adam Cooper
Adam Cooper

Reputation: 8677

You will need to generate an actual controller for your route and then define a queryParams property in the controller. It looks like the query param you're trying to hold onto is isdn so your controller should look something like:

export default Ember.Controller.extend({
  queryParams: ['isdn']
});

Upvotes: 1

Related Questions