EmberJS optional parameter

Question

I'm working on a rather large EmberJS app and I've come to the part where I want to be able to retrieve a tracking ID in the URL from any source. I've looked into Ember.Route.serialize , and a couple of similar questions here on SO, but no reply seems to properly solve the problem (ie, I have been unable to implement them on my site). The serialize -hook for example is only called on transitions, and to make sure the parameter is read, you'd have to expressively specifiy child-routes to pick it up.

I would like to have a route like this:

mysite.com/#!/ --> start page.
mysite.com/#!/19 --> start page with tracking ID 19.

mysite.com/#!/about --> about page.
mysite.com/#!/about/19 --> about page with tracking ID 19.

It seems that currently, to be able to fetch a parameter from any URL, you'd have to manually create a child route for every single route to retrieve it in the router:

App.Router.map({
    this.resource("index", { path: "/" }, function() {
        this.resource("indexTid", { path: ":tId" });
    });

    this.resource("about", { path: "/about" }, function() {
        this.resource("aboutTid", { path: ":tId" });
    });

    [ ... ]

However, this seems incredibly tedious and with so many routes, having to add individual route handlers ( App.AboutTidRoute = Ember.Route.extend [...] )...

I'm figuring someone's had this problem before. How do you best tackle this problem?

Alternative solutions are welcome, but note that the URLs should be possible do give to partners and the tracking should follow without further work put in from their side.

Thanks for your time.

Best regards, dimhoLt

PS. My current solution uses this URL mysite.com/?trackingId=19#!/about , which solves the problem-ish by setting a cookie on the server, but isn't very pretty. A better solution is greatly appreciated.

Answer 1

Beta/canary versions of Ember.js(1.4.0-beta.2) include support for query params. The guides page can be found here .

You'll have to use a beta or canary version and manually enable the feature to use it:

ENV = {FEATURES: {'query-params-new': true}};

That guide includes an example of setting/accessing a globally available query param:

App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_VIEW_LOOKUPS: true
});

App.ApplicationController = Ember.Controller.extend({
  queryParams: ['iamglobal'],
  iamglobal: 'foo'
});

App.IndexController = Ember.Controller.extend({
  needs: 'application',
  iamglobal: Ember.computed.alias(
    'controllers.application.iamglobal'
  )
});

jsbin example