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 click-method="callMe" text="click me"></composite-component>
</script>

JavaScript

var ComponentViewModel = can.Map.extend({
  "clicked": function() {
    this.attr('_parent')[this.attr('clickMethod')]();
  },

  "show-text": function() {
    return this.attr('text').toUpperCase(); // or call what the helper would've done
  }
});

var Component = can.Component.extend({
  tag: 'composite-component',
  template: '<a href="javascript://" ($click)="clicked">should show text: {{show-text}}</a>',
  viewModel: function(attrs, parent) {
    var map = new ComponentViewModel(attrs);

    map.attr('_parent', parent._context);

    return map;
  }
});

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

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

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