Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column
width50%

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:

Code Block
javascript
javascript
var button = jQuery(".button-classname");

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

Code Block
javascript
javascript
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.

Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...