CODEWITHSUNDEEP
javascriptember.jsember-query-params
ntgCleaner
ntgCleaner

Reputation: 5985

Ember transitionTo queryParams not updating the model or URL

I am trying to use queryParams to update and refresh the model. I've set it up the action to use route-action because the change event that's firing the action is within a component. I've installed ember-route-action-helper and the change event is working correctly, but the transitionTo is not being updated.

In filter-list.hbs

<input type="checkbox"
  class="filter-checkbox inp-{{value.filterValueId}}"
  value="{{value.filterValueId}}"
  onchange={{route-action "updateQuery" value.filterValueId list.filterId}}>

In routes/results.js

export default Ember.Route.extend({

queryParams: {
  status: {
    refreshModel:true
  },
  owner: {
    refreshModel:true
  }
},

params: null,

model(params) {
  this.set('params', params);
  return Ember.RSVP.hash({
    result: this.store.query('result', params),
    filter: this.store.findAll('filter'),
    params: params,
  });
},

setupController(controller, model) {
  this._super(...arguments);
  controller.set('result', model.result);
  controller.set('filter', model.filter);
  controller.set('params', model.params);
},

actions: {
  newParams(data){
    console.log("Received", data);
  },
  updateQuery: function() {
    //I make a URL string here from multiple checkboxes
    //and parse the URL string as a JSON object which is
    //modeled the same as a normal queryParameter
    let newParams = JSON.parse('{"' + decodeURI(urlString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
    console.log(newParams);
    this.transitionTo({queryParams: {newParams}});
  }
}

So, I first pull the params from the URL and send them down to fetch the results and also populate a filter list (list of checkboxes with filter names). Every time I click on a filter, if it sees the checkbox has changed, it fires the updateQuery action under the route using route-action.

The action runs (and I get the correct newParams output in the console. The line that's not working is this.transitionT(). The transition is not doing anything whatsoever. It's not updating the model, it's not changing the URL, nothing.

What am I missing?

Upvotes: 0

Views: 790

Answers (1)

ntgCleaner
ntgCleaner

Reputation: 5985

For anyone wondering, I figured this out.

Right now, I'm sending {queryParams: {newParams}} to the transitionTo function. But this was turning newParams into a key where the object it held was then the value, instead of using newParams as a full object.

I've changed this to {queryParams: newParams} so now it uses the variable as an object, rather than a key.

this.transitionTo({queryParams: newParams});

Upvotes: 1

Related Questions