Как создать правильную структуру для вложенных маршрутов в ember.js?

Question

Мне нужно создать приложение с маршрутами:

/пользователей - список пользователей
/пользователей/123 - информация о пользователе
/пользователей/123/элементы - список элементов пользовательских
/пользователей/123/предметы/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/1, я вижу сообщение в консоли браузера: «Переход на« users.user.index », но содержимое шаблона« пользователи/пользователь/индекс »не отображается.

Я не понимаю, почему, потому что у меня App.UsersUserIndexRoute

Может быть, я что-то пропустил?

Answer 1

, если я не ошибаюсь, с помощью UserIndexRoute (вместо UsersUserIndexRoute - маршруты, которые определяются как ресурсы, как правило, не имеют названия своих родительских маршрутах предваряется) с моделью крючком

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

(и соответствующий шаблон) должны сделать трюк.