CanJS Dojo Template

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

by tomwayson

HTML

<div class="header">
    <h1>CanJS Dojo Template</h1>
    <p>This template includes Dojo, 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 Dojo? Here are links to templates for other libraries:<br>
        <a href="http://jsfiddle.net/donejs/qYdwR/">jQuery</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="dummy"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="dummyEJS" type="text/ejs">
    <a href="javascript://">Click Me</a>
    <p id="msg">Clicked <%= counter.attr('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

require({
    aliases:[
        ['can/util/library', 'can/util/dojo'],
        ['can/hashchange', 'can/util/hashchange']
    ],
    baseUrl : 'http://canjs.us/release/latest/amd/can.js',
});

require(['can/control', 'can/observe', 'can/view', 'can/view/ejs'], 
function(Control, Observe, can) {
    var Dummy = Control({
        init: function(element, options) {
            this.counter = new Observe({
                click: 0
            });

            can.append(this.element, can.view('dummyEJS', {
                counter: this.counter
            }));
        },
        'a click': function(el, ev) {
            var newCount = this.counter.attr('click') + 1
            this.counter.attr('click', newCount);
        }
    });

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