node package manager

can-view-callbacks

Registered callbacks for behaviors

can-view-callbacks

Build Status

Registered callbacks for behaviors

API

can-view-callbacks {Object}

Registered callbacks for behaviors

Object

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

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

var $ = require("jquery");
require("jquery-datepicker");
var callbacks = require("can-view-callbacks");
 
callbacks.tag("date-picker", function(el){
    $(el).datePicker();
});
  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.

Object
  • 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);
      $(el).html(frag);
    })
    
  • 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) {
            el.style.display = 'block';
        } else {
            el.style.display = 'hidden';
        }
    };
 
    compute.bind("change", showOrHide);
    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].

Object
  • 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.

Contributing

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