can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
60 lines (47 loc) • 1.16 kB
HTML
<head>
<style>
a.active {
text-decoration: none;
cursor: default;
color: black;
}
</style>
</head>
<body>
<script type='text/mustache' id='ps-app-stash'>
<div class="panel-left">
<h2>Modules</h2>
<ul>
{{#modules}}
<li>{{{linkTo .}}}</li>
{{/modules}}
<a href='/can/foo/bar.html'>Testing</a>
</ul>
</div>
</script>
<script type='text/javascript' src="../../node_modules/steal/steal.js" main="@empty"></script>
<script type='text/javascript'>
steal("can/route/pushstate", "can/component",function(){
can.route.bindings.pushstate.root = steal.config("root")+"" ;
can.route(":module\\.html");
can.route(":module/:plugin/:page\\.html");
can.route.ready();
can.Component.extend({
tag: "ps-app",
template: can.view("ps-app-stash"),
scope: {
active: null,
modules: ["component","construct","control","route","map"]
},
helpers: {
linkTo: function(module){
return can.route.link(module, {module: module},{
className: can.route.attr('module') == module ? "active" : ""
})
}
}
});
$("body").append( can.view.mustache("<ps-app></ps-app>")({}) )
})
</script>
</body>