如何为ember.js中的嵌套路由创建一个正确的结构？ [英] how to create a right structure for nested routes in ember.js?

问题描述

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

I need to create an application with routes:

/ users - 用户列表

/ users / 123 - 用户信息

/ users / 123 / items - 用户项目列表

/ users / 123 / items / 456 - 项目信息

/users - list of users
/users/123 - user info
/users/123/items - list of user 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>

如果我去/用户，我看到一个用户列表 - 它的确定。

If I go to /users , I see a list of users - its ok.

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

If I go to /users/1 I see message in browser console: "Transitioned into 'users.user.index'", but the content of the template 'users/user/index' is not showing.

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

I do not understand why, because I have App.UsersUserIndexRoute

也许我错过了某些东西？

Maybe I missed something?

推荐答案

如果我没有误会，使用 UserIndexRoute （而不是一个 UsersUserIndexRoute - 定义为资源的路由通常不具有其父路由的名称前缀）与模型钩子

if i'm not mistaken, using a UserIndexRoute (instead of a UsersUserIndexRoute - routes that are defined as resources usually don't have their parent routes' names prepended) with the model hook

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

（和相应的模板）应该做的伎俩。

(and a corresponding template) should do the trick.

这篇关于如何为ember.js中的嵌套路由创建一个正确的结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！