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

我需要创建一个路由的应用程序：
如何在ember.js中为嵌套路由创建正确的结构？

/用户 - 用户信息
/用户/ 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'”，但模板'users/user/index'的内容未显示。

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

也许我错过了什么？

来源

2013-04-23 Deonis

如果我没有记错的话，使用UserIndexRoute（而不是UsersUserIndexRoute - 被定义为资源的路线通常不具备前置父路线的名字）与模型钩

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

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

来源

2013-04-23 10:04:50

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

回答

相关问题