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>
<div class="header">
    <h1>CanJS jQuery Template</h1>
    <p>This template includes jQuery, CanJS and all of its plugins. Use it as a starting point when you are submitting a question to <a href="https://twitter.com/#!/canjs" target="_blank">Twitter</a>, the <a href="https://forum.javascriptmvc.com/#Forum/canjs" target="_blank">forums</a> or IRC.</p>
    <p>Don't want jQuery? Here are links to templates for other libraries:<br>
        <a href="http://jsfiddle.net/donejs/9x96n/">Dojo</a> |        
        <a href="http://jsfiddle.net/donejs/w6m73/">YUI</a> | 
        <a href="http://jsfiddle.net/donejs/mnNJX/">Mootools</a> |  
        <a href="http://jsfiddle.net/donejs/7Yaxk/">Zepto</a>        
    </p>
</div>

<!-- YOUR CODE HERE -->
<div id="content"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/mustache">
    <h2>CanJS component example</h2>
    <click-counter></click-counter>
</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 Component = can.Component.extend({
    tag: 'click-counter',
    template: '<a href="javascript://" can-click="updateCount">' +
            'Click Me</a>' +
            '<p id="msg">Clicked {{count}} times</p>',
    scope: {
        count: 0,
        updateCount: function() {
            this.attr('count', this.attr('count') + 1);
        }
    }
});

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