[英]Canjs routing components
如何通过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: ""});
在组件中进行路由的技巧是不要在组件中进行路由。 相反,像
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.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.