Page Comparison

DOM Binder Overview

The purpose of the DOM Binder is to relax the coupling between a component and its markup: A DOM Binder handles any interaction a component may have with its markup.

Any parts of a component's markup that may be accessed by the code is assigned a named selector using an option called selectors. The component accesses that markup through a request to the DOM Binder using the name, rather than directly. So instead of having selectors hard-coded, like this:

var button = jQuery(".button-classname");

the selector is given a name and the DOM Binder's locate() method is used, like this:

selectors: {
    button: ".button-classname"
}
...
var button = that.locate("button");

This allows integrators to use whatever selectors they want in the markup (and simply specify the new selector in the selectors option); the component accesses the DOM through the names, not directly through selectors. The component defines default values for the selectors, but implementors are free to override the defaults if they need to change the structure of the markup.

The DOM Binder also ensures that a component accesses only markup specific to itself, and not to any other similar components that might be on the same page. Each Infusion View Component is scoped to a particular node in the DOM called its container. The DOM Binder limits any queries to that container.

The DOM Binder also caches information, allowing efficient access for searches that are performed very frequently on material that is not changing - for example within mouse event loops. Caching means these searches are do not have to be recomputed from the DOM on every query.