QA@IT

Ember.Router と ember-data の組み合わせで URL が undefined になる

1350 PV

/users/1 のようなよくあるルーティングを Ember.js で以下のように書いてみました。画面の遷移と表示は期待通りなのですが、なぜか生成される URL が /users/undefined になってしまいます。なぜでしょうか。

Ember.js のバージョンは v0.9.8.1-575-gf875767 です。

App = Ember.Application.create({
  User: DS.Model.extend({
    id:   DS.attr('number'),
    name: DS.attr('string')
  }),

  ApplicationController: Ember.Controller.extend(),
  UsersController: Ember.ArrayController.extend(),
  UserController: Ember.ObjectController.extend(),

  ApplicationView: Ember.View.extend({
    template: Ember.Handlebars.compile('{{outlet}}')
  }),
  UsersView: Ember.View.extend({
    template: Ember.Handlebars.compile(
      '<ul>{{#each content}}<li><a {{action showUser}}>{{name}}</a></li>{{/each}}</ul>'
    )
  }),
  UserView: Ember.View.extend({
    template: Ember.Handlebars.compile('<h1>Hello, {{name}}!</h1>')
  }),

  Router: Ember.Router.extend({
    root: Ember.Route.extend({
      home: Ember.Route.extend({
        route: '/',
        redirectsTo: 'users.index'
      }),

      users: Ember.Route.extend({
        route: '/users',

        index: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router) {
            var users = App.store.findAll(App.User);
            router.get('applicationController').connectOutlet('users', users);
          }
        }),

        user: Ember.Route.extend({
          route: '/:user_id',
          connectOutlets: function(router, context) {
            var user = App.store.find(App.User, context.user_id);
            router.get('applicationController').connectOutlet('user', user);
          }
        }),

        showUser: function(router, event) {
          router.transitionTo('user', {user_id: event.context.get('id')});
        }
      })
    })
  })
})

App.store = DS.Store.create({
  revision: 4,
  adapter: DS.fixtureAdapter
});

App.User.FIXTURES = [
  {id: 1, name: 'user1'},
  {id: 2, name: 'user2'}
];

App.initialize();
ウォッチ

この質問への回答やコメントをメールでお知らせします。