Query Params

/#/index?msg=hello&20world

  • dynamic url segments represent the model (eg. :id)
  • query params allow serialize other app state
    • filtering models
    • sort order
    • state of views (eg.tabs)

History

3rd iteration of query params

  • Alex Speller released ember-query library pre 1.0
  • 6 months ago - FEATURES['query-params'] by Alex Speller
  • 6 weeks ago - FEATURE['query-params-new'] by @machty

query-params vs query-params-new

Less work

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
  • transitionTo or {{#link-to}} Handlebars Subexpression
  • changing properties on Route's controller

Specifying Query Params

App.ArticlesController = Ember.ArrayController.extend({
  queryParams: ['category'],
  category: null
});

Values of params

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

Filtering with queryParams

  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

Route#model and query params

  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
  });

Full Transition & Route#refresh

call the Route#refresh method on queryParamsDidChange action

  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.

link-to helper & transitionTo method

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'}});

</presentation>

thanks!