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.stache.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<!-- YOUR CODE HERE -->
<div id="content"></div>
<div id="debug"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/stache">
    <ui-button></ui-button>
</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;
}

#debug {
    margin-top: 1em;
}

JavaScript

var Component = can.Component.extend({
    tag: 'ui-button',
    init:function(){
        can.route(':page',{page:'home'});
        can.route.map(this.viewModel)
        can.route.ready();
    },
    template: 'Im button Component',
    events:{
        inserted:function(el,ev){
            var vm=this.viewModel;
            //apply button plugin to ou component
            $(el).button();
            //see what happend inside our viewModel
            setTimeout(function(){
                $("#debug").html(JSON.stringify(vm.attr()));
            },1);
            
        }
    }
});

$('#content').html(can.view('main-template', {}));