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="control-a"></div>
<div id="control-b">
    <input type="text" name="counter" />
    <button>Update counter</button>
</div>

JavaScript

var ControlA = can.Control({
    '{state} change': function(ev) {
        this.element.html('Count is ' + this.options.state.attr('counter'));
    }
});

var ControlB = can.Control({
    'button click': function() {
        var counter = this.element.find('[name="counter"]').val();
        this.options.state.attr('counter', counter);
    }
});

var ob = new can.Observe();

var controla = new ControlA('#control-a', {
    state: ob
});

var controlb = new ControlB('#control-b', {
    state: ob
});

ob.attr('counter', 10);