CanJS Zepto Template

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

by rwaldin

HTML

<script src="http://canjs.com/release/latest/can.zepto.js"></script>
<script src="http://canjs.com/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.com/release/latest/can.construct.super.js"></script>
<script src="http://canjs.com/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.com/release/latest/can.observe.delegate.js"></script>
<div class="header">
    <h1>Testing CanJS + Zepto</h1>
</div>

<!-- YOUR CODE HERE -->
<h2>Returned results</h2>
<div id="theReturnedResults"></div>

<h2>Callback results</h2>
<div id="theCallbackResults"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="aTemplate" type="text/mustache">
    <ul>
        <li>immediate value: <span>{{anImmediate.value}}</span></li>
        <li>deferred value: <span>{{aDeferred.value}}</span></li>
    </ul>
</script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h2 {
    font-size: 20px;
    font-weight: bold;
}
p { 
    margin: 10px 0;
}
dt {float: left; margin-right: 10px}
input {width: 6em; font-size: 80%}

JavaScript

can.Control({
    init: function(element, options) {
        console.log(element[0])
        can.view('aTemplate', {
            anImmediate: new can.Observe({value: 'immediate'}),
            aDeferred: can.Deferred().resolve({value: 'resolved deferred'})
        }, function (results) {
            can.append(can.$(element[1]), results);
        }).done(function(results) {
            can.append(can.$(element[0]), results);
        });
    },
    'click': function(){alert(1);},
    'ul click': function(){alert(2);}
}).newInstance('#theCallbackResults, #theReturnedResults',{});