5
votes

So I want to use query parameters in the URL of my application. The Ember guide describes the solution: http://emberjs.com/guides/routing/query-params/

Unsuccessfully I tried it out in my ember-cli project, so I've set up a small test project without cli.

Route:

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

Template:

<script type="text/x-handlebars" id="index">
 <ul>
 {{#each item in model}}
   <li {{action 'pickColour' item}}>{{item}}</li>
 {{/each}}
</ul>
<div>Currently selected: {{selected}}</div>
</script>

Controller:

App.IndexController = Ember.ArrayController.extend({
 queryParams: ['selected'],
 selected: null,

 actions: {
   pickColour: function(colour) {
     console.log("Colour " + colour + " selected");
     this.set('selected', colour);
   }
 }
});

According to the Ember guide this should bind the selected field of the controller to the url parameters. But in this case no url parameters is set when I click a specific colour.

It should be so simple yet I can't make it work. Am I gloriously overlooking something?

Edit: SOLUTION

I missed the fact that for now it's only available in the beta. If you read this in the future, be aware that it might be available in the latest full release.

1
and what is the version string of your ember? - mohamnag
you have to use a beta version, are you? - mohamnag
OMG, I totally missed that! Indeed it is said at the top of the guide article. Well, I only spend half a day on this issue. :p Thank you! - Baukereg

1 Answers

0
votes

This is working just fine in version 1.9.0, so this question can probably be closed.

Working demo here