Ember.js Router v2 dynamic slug is null

Question

In the following example, using the new Router v2 API, the ember application behaves as expected with one exception. When hovering over the dynamically created links, using a registered #linkTo Handlebars helper the id of the user is null in the url.

Clicking the link transitions to the proper state, but the url is still 'null'.

What gives? Is there a simple convention I am missing?

App = Ember.Application.create({
  autoinit: false,
  rootElement: "body"
});

App.Store = DS.Store.extend({
  revision: 11, 
  adapter: DS.RESTAdapter.create({})
});

App.User = DS.Model.extend({
  email: DS.attr('string'),
  username: DS.attr('string')
});

App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

App.ApplicationController = Ember.Controller.extend();

App.HomeController = Ember.Controller.extend({
});

App.UserController = Ember.ObjectController.extend({
});

App.Router.map(function(match) {
  match("/").to("home");
  match("/users/:user_id").to("user");    
});

App.HomeRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('users', App.User.find());
  }
});

App.UserRoute = Ember.Route.extend({
  setupControllers: function(controller, user) {
    controller.set('content', user);
  }
});

App.initialize();

<script type="text/x-handlebars" data-template-name="home">

    {{#if users.isLoaded}}

      {{#each item in users}}
          <div class="user">
            {{item.email}}
          </div>

          <div class="user">
            {{#linkTo user item}}
              {{item.username}}
            {{/linkTo}}
          </div>

      {{/each}}

    {{else}}
      <p class="loading">Loading Users</p>
    {{/if}}

</script>   

<script type="text/x-handlebars" data-template-name="user">

    <div class="user">
      <h3>{{username}}</h3>
      <p class="email">{{email}}</p>
    </div>

</script>

Sean Keating Sean Keating · Accepted Answer · 2013-01-15T21:24:21

I created a fiddle with your code, and it seems to be working fine: JS Fiddle Example

I am assuming that the API returns models like how I defined App.User.FIXTURES. Let me know if that is incorrect.

I am using EmberJS Version: v1.0.0-pre.2-291-g4785901 with Last commit: 4785901 (2013-01-05 18:57:16 +0100) and you can find it here. Try to see if this version of Ember fixes your issues.

Also, for your information, they recently updated EmberJS Routing again and match in the router no longer works. You can see the new format here: EmberJS.com Defining Your Routes. My "in progress" Ember-JS-Example has a similar routing to yours but is updated, you could use it as an example if you'd like. New style, from EmberJS.com:

App.Router.map(function() {
  this.route("about", { path: "/about" });
  this.route("favorites", { path: "/favs" });
});

Ember.js Router v2 dynamic slug is null

2 Answers