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>
<script src="http://canjs.com/release/latest/can.map.define.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<script id="app-tpl" type="text/x-stache-template">
<x-app><a class="link" id="home" href="javascript://">Home</a><a class="link" id="project" href="javascript://">Project</a></x-app>
</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.Map.extend('AppState',{
  define:{
    page:{
      set:function(val){
      return val ? val : 'home';
     },
        get:function(val){
            return val;
        }
    },
     view:{
        set:function(val){
          return val ? val : 'index';
        }
      }
   }
  });
can.Component.extend({
  tag:'x-app',
  init:function(){
   /* can.route.map(this.scope);
    can.route(':app',{
      app:'home',
      view:'index'
    });
    can.route.ready();*/
  },
  scope:AppState,
  
  events:{
    init:function(el){
      el.addClass('container');     
    },
      '.link click':function(el,ev){
            var app=el.prop('id');
            
            this.scope.attr('app',app);
        },
    inserted:function(el,ev){
         can.route.map(this.scope);
    can.route(':app',{
      app:'home',
      view:'index'
    });
    can.route.ready();
      var tag=can.stache('<x-navigator class="pop"/>')
      d=JSON.stringify(can.route.attr());
      el.append(tag({app:this.scope.attr('app')})),  
      
      el.find('x-navigator').append(d);
    }
  }
});

can.Component.extend({
    tag:'x-navigator',
    scope:{
        app:{},
    },
    events:{
        init:function(){
            console.log(this.scope.attr())
        },
        '{scope} app':function(scope,ev,n,o){
            console.log(n)
        }
    }
})
 
$('body').append(can.view('app-tpl'));