1

我需要创建一个带有路由的应用程序：

/users - 用户列表
/users/123 - 用户信息
/users/123/items - 用户项目列表
/users/123/items/456 - 项目信息

我在这里写了这段代码

$(function() {
  var App = window.App = Ember.Application.create({LOG_TRANSITIONS: true});

  App.Router.map(function() {
    this.resource("users", {path: '/users'}, function() {
      this.resource("user", {path: '/:user_id'}, function() {
        this.resource("items", {path: '/items'}, function() {
          this.route("item", {path: '/:item_id'});
        });
      });
    });
  });

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

  //ROUTES
  App.UsersIndexRoute = Ember.Route.extend({
    model: function() {
      return App.User.find();
    }
  });
  App.UsersUserIndexRoute = Ember.Route.extend({
    model: function(params) {
      return App.User.find(params.user_id);
    },
    setupController: function(controller, model) {
      controller.set('content', model);
    }
  });


  //DATA
  App.User = DS.Model.extend({
    name: DS.attr('string'),
    items: DS.hasMany('App.Item')
  });
  App.Item = DS.Model.extend({
    name: DS.attr('string')
  });
  App.User.FIXTURES = [
    {
      id: 1,
      name: 'Joe',
      items: [1, 2]
    }, {
      id: 2,
      name: 'John',
      items: [2, 3]
    }
  ];
  App.Item.FIXTURES = [
    {
      id: 1,
      name: 'Item 1',
    }, {
      id: 2,
      name: 'Item 2',
    }, {
      id: 3,
      name: 'Item 3',
    }
  ];
  return true;
});

和模板：

<script type="text/x-handlebars" data-template-name="application">
  <div>
    <h1>ember routes</h1>
    {{outlet}}
  </div>
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Hello from index</h2>
  {{#linkTo 'users'}}users area{{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="users">
  <h2>users area</h2>
  {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="users/index">
  <h3>users list</h3>
  {{#each user in controller}}
  {{#linkTo "user" user}}{{user.name}}{{/linkTo}}<br/>
  {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="users/user">
  {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="users/user/index">
  <h4>user {{name}} index</h4>
</script>
<script type="text/x-handlebars" data-template-name="users/user/items">
  <h4>user {{name}} items</h4>
  {{outlet}}
</script>

如果我去 /users ，我会看到一个用户列表 - 没关系。

如果我转到 /users/1，我会在浏览器控制台中看到消息：“已转换为 'users.user.index'”，但未显示模板 'users/user/index' 的内容。

我不明白为什么，因为我有 App.UsersUserIndexRoute

也许我错过了什么？

4

1 回答 1

4

如果我没记错的话，使用带有模型钩子的UserIndexRoute（而不是UsersUserIndexRoute- 定义为资源的路由通常没有前缀其父路由的名称）

model: function(params) {
  return this.modelFor("user");
}

（和相应的模板）应该可以解决问题。

于 2013-04-23T10:04:50.970 回答