- 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!