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.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<div id="dummy"></div>

<div id="out"></div>

<script type="text/mustache" id="template">
    <input type="text" value="{{va}}" id="me" />
</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 v=can.compute(20);

v.bind("change", function(ev, newVal, oldVal){
 console.log(newVal)
})
(function() {
    Dummy = can.Control({
        init: function(element, options) {
            this.element.html(can.view('#template',{va:this.options.value}));
            this.on();
        },
        "{value} change":function(val,newVal,oldVl){
           console.log(val());
        },
        'input change':function(el,ev){
           this.options.value(el.val());
        }
       
    });

    new Dummy('#dummy',{value:v});
})();