Cannot pass queryParams - ember.js

Question

I'm newbie in ember.js and i'm trying to sort a list of products in my app.
I have a route catalog/category.js:
import Ember from 'ember';
export default Ember.Route.extend({
queryParams: {
ordering: {
refreshModel: false,
},
},
model (params) {
return Ember.RSVP.hash({
categories: this.store.peekAll('category'),
category: this.store.peekRecord('category', params.category_id),
});
}
});
and controller catalog/category.js:
import Ember from 'ember';
export default Ember.Controller.extend({
queryParams: ['ordering'],
ordering: null,
sortedProducts: Ember.computed.sort('model.category.products', 'ordering'),
});
Link passes a parameter:
{{#link-to 'catalog.category' (query-params ordering='price')}}Price Asc{{/link-to}}
ordering parameter is setting to price and it doesn't work. But when I manually set the ordering parameter to ['price'] - everything works as expected.
Can anyone suggest how to fix it?

Answer 1

ordering parameter is setting to price and it doesn't work. But when I
manually set the ordering parameter to ['price'] - everything works as
expected.
There is a difference between string:price (set by query param) and array:['price'] (set by you manually).
You need another property which will create that array for you:
import Ember from 'ember';
export default Ember.Controller.extend({
queryParams: ['ordering'],
ordering: null,
orderingObserver: Ember.on('init', Ember.observer('ordering', function() {
let ordering = this.get('ordering');
let array = [];
if (ordering) {
array.push(ordering);
}
this.set('orderingArray', array);
})),
sortedProducts: Ember.computed.sort('model.category.products', 'orderingArray'),
});
isn't it supposed to work "out of the box"?
It works with arrays of properties - http://emberjs.com/api/classes/Ember.computed.html#method_sort.