how to create a right structure for nested routes in ember.js?

问题

I need to create an application with routes:

/users - list of users
/users/123 - user info
/users/123/items - list of user items
/users/123/items/456 - items info

I wrote this code here

$(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;
});

And templates:

<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.

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.

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

Maybe I missed something?

回答1:

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.

来源：https://stackoverflow.com/questions/16165892/how-to-create-a-right-structure-for-nested-routes-in-ember-js

标签

ember.js

ember-router