ember.js - ember.jsでネストされたルートの正しい構造を作成する方法は?

Question

ルートを使用してアプリケーションを作成する必要があります。

/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 があるため、理由がわかりません

多分私は何かを逃しましたか？