DOM Bindings

Constraint variables alone aren't useful until they are connected with some form of output. Usually, this will be in the form of a DOM binding to keep DOM properties in sync with variable values. There are several ways to create DOM bindings:

• .bindAttr(attr_name,value) — set any attribute of the DOM obj.
• .bindChildren(value) — set the child nodes of a DOM obj. value may be an array.
• .bindClass(value) — set the class name of a DOM object
• .bindCSS(attr_name,value) — set a CSS attribute of the DOM obj.
• .bindText(value) — set the text value of a DOM obj.
• .bindValue(text) — set the value of a text input obj.

For example, suppose we have a DOM element named my_elem (my_elem can be a DOM element, a NodeList, a JavaScript array, a ConstraintJS array, or a jQuery object):

var bg_color = cjs.constraint("red");
var binding = cjs.bindCSS(my_elem, bg_color); // my_elem has a red background
bg_color.set("blue"); // my_elem now has a blue background

Here, binding is a binding object. This binding object has several operations to modify how it works:

• .pause() - pauses the binding, can be resumed with:
• .resume() - resume a paused binding
• .destroy() - remove the binding
• .throttle(ms) - require at least ms milliseconds between updates to the DOM attribute

###Input Value Constraints Related to bindings are input value constraints. Input value constraints are constraints whose values are bound to the value of an <input> element. cjs.inputValue(elem) creates an input value constraint. For instance, suppose my_input_elem is an <input> element.

var input_val = cjs.inputValue(my_input_elem);

The above code creates a constraint called input_val whose value is constrained to the value of my_input_elem.

---

Next: Detecting Variable Changes

Previous: ConstraintJS Internals