如何在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中爲嵌套路由創建正確的結構？

回答

相關問題