Canjs路由組件

Question

如何使用canjs進行組件路由？
我有下面的例子

can.Component.extend({ 
    tag: "router", 
    events: { 
     "{can.route} id bla": function(route, event, id, bla) { 
     console.log("route", id, bla); 
     } 
    } 
    }); 

我如何具體路線相匹配？例如page/2/foo。
路線被定義爲

can.route(":page/:id/:bla", {page: "", id: "", bla: ""}); 

Answer 1

做在組件路由是無法做到的組件路由的伎倆。相反，像

can.route(":page/:id", {page: "content", id: "index"}); 

您通過can.route作爲狀態對象。有了這樣一個主要觀點：

<script id="main" type="text/mustache"> 
    <app-page page="state.page" page-id="state.id"></app-page> 
</script> 

呈現像 can.view('main', { state: can.route })

您的組件，然後只檢查這些屬性：

can.Component.extend({ 
    tag: 'app-page', 
    template: 'page', 
    scope: { 
    isBlog: function() { 
     return this.attr('page') === 'blog'; 
    }, 

    isStatic: function() { 
     return this.attr('page') === 'content'; 
    } 
    } 
}); 

與初始化其子組件的視圖：

<script id="page" type="text/mustache"> 
    {{#if isBlog}} 
    <app-blog blog-id="pageId"></app-blog> 
    {{/if}} 
    {{#if isStatic}} 
    <app-static page-id="pageId"></app-static> 
    {{/if}} 
</script>