can-view-callbacks

can-view-callbacks

Registered callbacks for behaviors

• can-view-callbacks Object
  • callbacks.tag(tagName, tagHandler(el, tagData))
    • tagData Object
  • callbacks.attr(attributeName, attrHandler(el, attrData))
    • attrData Object

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