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="out"></div>

<script type="text/x-stache-template" id="appTpl">
    <x-app message="{{message}}" foo="bar">Click</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

var Widget=can.Construct.extend({
    setup:function(){
        can.Construct.setup.apply(this,arguments);
        if(Widget){
            var ctr=this.prototype.control;
            console.log(ctr);
        }
        
    }
},{
    setup:function(tag,control){
        console.log(control)
        this.control=control;
    }
});
var MyCtrl=can.Control.extend({
    init:function(el,options){
       console.log(el);
    }
})
var MyWidget=Widget.extend({
    init:function(tag,control){}
});

$('#out').html(can.view("appTpl"));
new MyWidget('x-app',MyCtrl);