Tripod.js

Using Binding Modifiers

So far all of this data binding goodness has dealt with getting values and pushing them around to various places (the DOM, JS, Local Storage.) One common DOM manipulation task is to show or hide portions of a page based on some value.

Consider this markup:

<label>
	<input type="checkbox" data-bound-to="vehicle.hasAirBags">
	My vehicle has air bags.
</label>

<div>
	How many air bags does your vehicle have?
	<input type="number" data-bound-to="vehicle.numberOfAirBags">
</div>

It doesn't really make sense to ask the user how many air bags they have if they don't check the box, right? A better user experience would be to hide the second question if the first checkbox is unchecked. You can use binding modifiers to achieve this.

All you need to do is bind the container element to the checkbox and use the data-bound-as attribute.

So, our new markup looks like this:

<label>
	<input type="checkbox" data-bound-to="vehicle.hasAirBags">
	My vehicle has air bags.
</label>

<div data-bound-to="vehicle.hasAirBags" data-bound-as="show">
	How many air bags does your vehicle have?
	<input type="number" data-bound-to="vehicle.numberOfAirBags">
</div>

data-bound-as is the binding modifier attribute. show is the name of the modifier function we're using in this case.

Check out all of the built-in binding modifiers, then create your own in a snap! Seriously, it's super easy.