Register callbacks for CanJS view engines
JavaScript HTML
Failed to load latest commit information.


Build Status

Registered callbacks for behaviors


can-view-callbacks {Object}

Registered callbacks for behaviors


callbacks.tag(tagName, tagHandler(el, tagData))

Registers the tagHandler callback when tagName is found in a template.

var $ = require("jquery");
var callbacks = require("can-view-callbacks");

callbacks.tag("date-picker", function(el){
  1. tagName {String}: A lower-case, hypenated or colon-seperated html tag. Example: "my-widget" or "my:widget". It is considered a best-practice to have a hypen or colon in all custom-tag names.

  2. tagHandler {function(el, tagData)}:

    Adds custom behavior to el. If tagHandler returns data, it is used to render tagData.subtemplate and the result is inserted as the childNodes of el.

tagData {Object}

The data passed to tag.

  • subtemplate {can.view.renderer}: If the special tag has content, the content can be rendered with subtemplate. For example:

    callbacks.tag("foo-bar", function(el, tagData){
      var frag = tagData.subtemplate(tagData.scope, tagData.options);
  • scope {can-view-scope}: The scope of the element.

  • options {can.view.Options}: The mustache helpers and other non-data values passed to the template.

callbacks.attr(attributeName, attrHandler(el, attrData))

var callbacks = require("can-view-callbacks");

callbacks.attr("show-when", function(el, attrData){
    var prop = el.getAttribute("show-when");
    var compute = attrData.compute(prop);

    var showOrHide = function(){
        var val = compute();
        if(val) {
   = 'block';
        } else {
   = 'hidden';

    compute.bind("change", showOrHide);

    el.addEventListener("removed", function onremove(){
        compute.unbind("change", showOrHide);
        el.removeEventListener("removed", onremove);
  1. attributeName {String|RegExp}: A lower-case attribute name or regular expression that matches attribute names. Examples: "my-fill" or /my-\w/.

  2. attrHandler {function(el, attrData)}:

    A function that adds custom behavior to el.

attrData {Object}

The data provided to [can.view-callbacks.attr].

  • scope {can-view-scope}: The scope of the element.

  • options {can.view.Options}: The mustache helpers and other non-data values passed to the template.

  • attributeName {String}: The attribute name that was matched.


Making a Build

To make a build of the distributables into dist/ in the cloned repository run

npm install
node build

Running the tests

Tests can run in the browser by opening a webserver and visiting the test.html page. Automated tests that run the tests from the command line in Firefox can be run with

npm test