CanJS jQuery Template

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

by EbenRoux

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.stache.js"></script>
<!-- YOUR CODE HERE -->
<div id="content"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/stache">
    <h2>CanJS composite component</h2>
    <composite-component clickMethod="callMe" helperArgument="click me"></composite-component>
    <div ($click)="directCall"><span>{{upper "you can click me"}}</span></div>
</script>

JavaScript

var Component = can.Component.extend({
    tag: 'composite-component',
    template: '<a href="javascript://" $(click)="{{clickMethod}}">should show text: {{upper "{{helperArgument}"}}</a>'
});

var model = new can.Map({
		callMe: function(){
    		alert('called me!')
    },
    
    directCall: function(){
    		alert('called directly!');
    }
});

can.stache.registerHelper('upper', function(text) {
		return text.toUpperCase();
});

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