- dynamic url segments represent the model (eg. :id)
- query params allow serialize other app state
- filtering models
- sort order
- state of views (eg.tabs)
| query-params | query-params-new | |
|---|---|---|
| Declaration | Router#map | Route's controller |
| Params access | new arg to model hooks | bound to Route's controller |
| Changing params | transitionTo or {{#link-to}} arguments |
|
App.ArticlesController = Ember.ArrayController.extend({
queryParams: ['category'],
category: null
});
controller.set('category', null) // -> /#/articles
controller.set('category', 'news') // -> /#/articles?articles[category]=news
controller.set('category', ['news', 'sports']) // -> /#/articles?articles[category]=news&articles[category]=sports
controller.set('category', true) // -> /#/articles&articles[category]
controller.set('category', false) // -> /#/articles
App.ArticlesController = Ember.ArrayController.extend({
queryParams: ['category'],
category: null,
filteredArticles: function() {
var category = this.get('category');
var articles = this.get('model');
if (category) {
return articles.filterProperty('category', category);
} else {
return articles;
}
}.property('category', 'model')
});
Note: model hooks are not executed on transition
App.ArticlesRoute = Ember.Route.extend({
model: function(params, transition) {
// 1. params with dynamic segments & query params
// 2. transition.params is a hash or route hierarchy
// 3. this will only be called first time entering the route
// 4. all internal transitions will not call model hook
return this.store.findQuery('articles', params);
}
});
App.ArticlesController = Ember.ArrayController.extend({
queryParams: ['category'],
category: null
});
App.ArticlesRoute = Ember.Route.extend({
model: function(params) {
return this.store.findQuery('articles', params);
},
actions: {
queryParamsDidChange: function() {
this.refresh();
}
}
});
App.ArticlesController = Ember.ArrayController.extend({
queryParams: ['category'],
category: null
});
Note: Route#refresh - general purpose introduced in query-params-new.
Templates require Subexpressions from Handlebars 1.3
// specify explicitely
{{#link-to 'posts' (query-params direction="asc")}}Sort{{/link-to}}
// bind to a property
{{#link-to 'posts' (query-params direction=otherDirection)}}Sort{{/link-to}}
Route#transitionTo and Controller#transitionToRoute accept queryParams key in last parameter
this.transitionTo('post', object, {queryParams: {showDetails: true}});
this.transitionTo('posts', {queryParams: {sort: 'title'}});
this.transitionTo({queryParams: {direction: 'asc'}});
thanks!