Ember.js Route with searchquery causes: UnrecognizedURLError

Question

In my app I have a searchformula with dynamic input fields. The form leads then to the following URL:

/trefferliste/?modulId=1&modus=dokument&identnummer=XXX

my route definition:

this.resource('trefferliste', { 'path' : 'trefferliste/:query' });

until this point it works, but when i refresh the page it says: UnrecognizedURLError

in the trefferliste route I load the data with following statement:

return this.store.find('trefferliste', params.query);

I figured out, that the "?" causes the problem, but I need it for my store find query. So, can someone tell me how to define my route?

UPDATE: Here is a jsbin: http://emberjs.jsbin.com/nesehuxugi

Steps to reproduce the error:

Push the Button > then refresh the page and look into the console!

some additional informations:

DEBUG: Ember      : 1.12.1
ember-template-compiler.js:163 DEBUG: Ember Data : 1.0.0-beta.17
ember-template-compiler.js:163 DEBUG: jQuery     : 1.11.2

Answer 1

Use query params instead of dynamic segments, so characters with special meaning to URL schema will be escaped and your application routing will work even on refresh.

URL becomes: http://app.com#/trefferliste?query=%3FmodulId%3D1%26modus%3Ddokument%26identnummer%3DXXX, but you have to respect Ember.js and global URL conventions.

Working demo.

Code:

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('trefferliste');
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.TrefferlisteController = Ember.Controller.extend({
  queryParams: ['query'],
  query: null
});

App.IndexController = Ember.ObjectController.extend({ 
  actions: {
    suche: function() {
      var query = "?modulId=1&modus=dokument&identnummer=XXX";
      this.transitionTo('trefferliste', { queryParams: { query: query } });
    }
  }
});