Tripod.js

Built-In Binding Modifiers

value

value is the default behavior you've seen before; The bound value is applied to the node.

If the data-bound-as attribute is missing, blank, or unrecognized value is used.

html

Where the value binding modifier sets an element's textContent (or innerText for old IE) property, the html binding modifier sets the element's innerHTML property.

If your data is in HTML form and you expect to see it inserted into your page's DOM, this is the binding modifier you need.

show

The show binding modifier will show an element if the attribute it is bound to is truthy. Otherwise, the element will be hidden.

showIfEqualTo

Requires 1 argument.

showIfEqualTo behaves similarly to show, but rather than checking for a truthy value, it compares the bound attriute's value to the argument. If they're equal, the element is shown.

hide

The hide binding modifier is the opposite of show. It will hide (CSS display: none) an element if the attribute it is bound to is truthy. Otherwise, the element will be shown.

hideIfEqualTo

Requires 1 argument.

hideIfEqualTo is the opposite of showIfEqualTo. It compares the bound attriute's value to the argument. If they're equal, the element is hidden.

enable

The enable binding modifier will enable an input element if the attribute it is bound to is truthy. Otherwise, the element will be disabled.

disable

The disable binding modifier will disable an input element if the attribute it is bound to is truthy. Otherwise, the element will be enabled.

toggleClass

Requires 1 argument.

toggleClass adds a CSS class (passed as an argument) to the bound element if the bound attribute value is truthy. If the value is falsey, the class is removed.

currency

Accepts 1 optional argument.

currency converts the bound attribute to a formatted currency string and sets the bound element's value or textContent to this currency string.

You can supply a currency symbol as the only argument. The default is $.

roundNumber

Accepts 1 optional argument.

roundNumber converts the bound attribute to a rounded number and sets the bound element's value or textContent to this rounded number string.

You can supply the number of decimal places to round to as the only argument. The default is 0 (round to a whole number/integer).

template

Accepts 1 optional argument.

The template binding modifier uses the contents of the bound node as an HTML template. It uses a built-in handlebars-ish templating engine.

Optionally, you can supply the id of another DOM node to use as a template. For best performance and fewer surprises, your best bet is to use something like <script id="yourTemplateNodeIdHere" type="text/template"></script> for your template container.

Tripod attributes bound with the template binding modifier can be either objects or arrays of objects. If an array of objects is found, the template HTML will be copied for each item in the array.

template Binding Modifier Example

<table>
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
		</tr>
	</thead>
	<tbody data-bound-to="someAttribute" data-bound-as="template">
		<tr>
			<td>{firstName}</td>
			<td>{lastName}</td>
		</tr>
	</tbody>
</table>

var t = new Tripod();
// you can use a single object...
t.set('someAttribute', { firstName: 'Mark', lastName: 'Watney'});

// ...but it's more fun to use an array of objects
t.set('someAttribute', [
	{ firstName: 'Mark', lastName: 'Watney'},
	{ firstName: 'Harry', lastName: 'Dresden'},
	{ firstName: 'Jack', lastName: 'Reacher'}
]);

Example DOM Result

<table>
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
		</tr>
	</thead>
	<tbody data-bound-to="someAttribute" data-bound-as="template">
		<tr>
			<td>Mark</td>
			<td>Watney</td>
		</tr>
		<tr>
			<td>Harry</td>
			<td>Dresden</td>
		</tr>
		<tr>
			<td>Jack</td>
			<td>Reacher</td>
		</tr>
	</tbody>
</table>