Question

我需要创建一个包含路线的应用程序：

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

我在这里写了这段代码

$(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

也许我错过了什么？

Answer 1

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

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

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

如何在ember.js中为嵌套路径创建正确的结构？

1 个答案: