Tripod.js

Adding Your Own Binding Modifiers

Adding your own custom binding modifiers to Tripod is dead simple.

Just add your own method to Tripod.bindingModifierFunctions, like so:

Tripod.bindingModifierFunctions.numberToEnglish = function(node, value, bindingModifiers) {
	switch(value) {
		case '1':
			return 'one';
		case '2':
			return 'two';
		// etc...
	}
};

Then, in your markup, use your method name as the binding modifier name:

<span data-bound-to="someAttribute" data-bound-as="numberToEnglish"></span>

Binding Modifiers That Don't Update Node Value or Contents

The value returned by your modifier function will be used as the new value/content for the bound node. If you don't want the node value or contents to be updated, don't return anything in your modifier function.

Consider this example:

Tripod.bindingModifierFunctions.makeItBlue = function(node, value, bindingModifiers) {
	if(value === '5') {
		node.style.color = 'blue';
	}
	//no return value
};

The fake "makeItBlue" modifier makes the node's CSS color propery blue when the bound attribute value is 5. The contents of the node will not be changed.

tl;dr: If you don't return anything, the DOM node will not be changed.

Binding Modifier Arguments

You may want your binding modifier function to receive some arguments. The built-in toggleClass modifier is a good example of this. You have to tell it what class to toggle on and off.

You can pass arguments to your binding modifier function by including them in the data-bound-as HTML attribute, using the pipe character | to separate arguments. Pass as many as you'd like.

The third argument passed to your modifier function is the array of binding modifiers in the attribute. (Each argument is trim'd for convenience.) Note that the first item in the modifiers array is the name of your modifier function. Under the hood, String.prototype.split() is used to create this array.

Modifier Arguments Example: toggleClass

<span data-bound-to="someAttribute" data-bound-as="toggleClass | myAwesomeClass"></span>

//the built-in toggleClass modifier, slightly modified for clarity
Tripod.bindingModifierFunctions.toggleClass = function(node, value, bindingModifiers) {
	if(bindingModifiers.length === 2) {
		var cssClassName = bindingModifiers[1];
		Tripod.util.toggleClass(node, cssClassName, value);
	} else {
		throw 'toggleClass requires a parameter.';
	}
};

Remember that your function name is always the first item in the array your function is passed. data-bound-as="toggleClass | myAwesomeClass" yields the array: ['toggleClass', 'myAwesomeClass']