CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<a href="#!login">Login</a>
<a href="#!">Logout</a>

<ul id='modules' style="display:none">
    <li id='login'><a href="#!login">Login</a></li>
    <li id='filemanager'><a href="#!filemanager">Filemanager</a></li>
    <li id='contacts'><a href="#!contacts">Contacts</a></li>
</ul>

CSS

.active {
    background-color: yellow;
}
ul {
   list-style: circle;   
   margin: 5px 20px;
}

JavaScript

var Navigate = can.Control({
    "{can.route} module add" : function(){
       this.element.show();
    },
    "{can.route} module set" : function(route, ev, newVal,oldVal){
       $("#"+oldVal).removeClass("active");
       $("#"+newVal).addClass("active");
    },
    "{can.route} module remove" : function(){
       this.element.hide();
        this.element.children().removeClass("active");
    }
});

can.route(":module");

new Navigate("#modules");