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>