Skip to content

Define Custom Directives

Hai Phan edited this page Jul 31, 2015 · 2 revisions

To define custom directives, set dataBinder.onDataBinding to a function that will be called before each node is bound. Inside this function you can process your custom directives by macro-expanding them into binding directives. For example:

dataBinder.onDataBinding = function(node) {
	var expr = node.getAttribute("xx-value");
	if (expr) node.setAttribute("bind-statement-set-value", "thisElem.value = " + expr);
	
	expr = node.getAttribute("xx-visible");
	if (expr) node.setAttribute("bind-statement-set-visible", "$(thisElem).toggle(" + expr + ")");
	
	expr = node.getAttribute("xx-if");
	if (expr) node.setAttribute("bind-repeater-if", expr + " ? 1 : 0");
	
	//calling some function to do the work
	expr = node.getAttribute("xx-transform");
	if (expr) node.setAttribute("bind-statement-set-transform", "window.setTransform(thisElem, " + expr + ")");
};

See the "customized todolist" example.

Clone this wiki locally