CanJS jQuery Template

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

by cherif_b

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<div id="app">
 
    
    
    <div id="app-module"></div>    
</div>

<script id="module-stache" type="text/mustache">
         {{#if user.appUser.loggedin}}
              <a id="logout" href="javascript://">logout</a>
            {{user.appUser.name}}
          {{else}}
            <a id="login" href="javascript://">login</a>
        {{/if}}
    {{#if user.appUser.name}}
            {{user.appUser.name}}
        {{/if}}
    
       
  
    
  
</script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
p { 
    margin: 10px 0;
}

JavaScript

can.fixture('/login',function(request,response){
    response({username:'admin',id:1,name:'ADMIN Admin'})
})

can.Map.extend('AppUser',{
    loggedin:false,
    login:function(){
        var self=this;
       can.post('/login',{username:'admin',password:'admin'})
           .then(
               function(response){
                   self.attr(response,true)
                   self.attr('loggedin',true)
               },
               function(){
                   self.attr('loggedin','error')
               }
           );
    },
    logout:function(){
        can.batch.start();
        this.attr('loggedin',false);
        this.removeAttr('username');
        this.removeAttr('id');
        this.removeAttr('name');
        can.batch.stop();
    }
   
})

can.Control.extend('AppControl',{
    init:function(el,opts){
        this.appUser=new AppUser();
        this.userMap=new can.Map({
            appUser:this.appUser
        });
              
        moduleEl=el.find('#app-module');
       
        new AppModule(moduleEl,{
            user:this.userMap
        })
    },
   
    'a#login click':function(el,ev){
        this.appUser.login();
    },
    'a#logout click':function(el,ev){
        this.appUser.logout();
    }
});

can.Control.extend('AppModule',{
    init:function(el,opts){
        el.html(can.view('module-stache',opts));
    }
})

new AppControl('#app');