CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by navindian

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 class="header">
   

   
</div>
<!-- YOUR CODE HERE -->
<div id="dummy"></div>
<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="dummyMustache" type="text/mustache">
    < a href = "javascript://" > Click Me < /a>
    <p id="msg">Clicked {{counter.click}} times</p >
</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

(function () {
    Dummy = can.Control({
        init: function (element, options) {
            this.counter = new can.Observe({
                click: 0
            });
            this.element.append(can.view('dummyMustache', {
                counter: this.counter
            }));
        },
            'a click': function (el, ev) {
            var newCount = this.counter.attr('click') + 1
            this.counter.attr('click', newCount);
        }
    });

    new Dummy('#dummy');
})();