Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width50%

DOM Binder Overview

The purpose of the DOM Binder is to relax the coupling between a component and its markup. Whilst the Fluid framework is built on jQuery, and uses that framework's selector engine throughout to perform queries on the DOM, the extra level of indirection provided by the DOM Binder allows a complete separation of concerns. Fluid components are parameterised by a set of named selectors, managed by the DOM Binder instance attached to each top-level component. In this way, explicit selectors never appear in component code - leaving the components free of any baked dependence on markup structure.

There are other benefits to having DOM searches (via jQuery) managed in a central location - component authors can get access to fine-grained control over caching and lifetime of search results, which might otherwise become expensive if performed repeatedly - along with its basic locate() method, each DOM binder has a fastLocate() method which will not perform a DOM search if there is a cached result.

Components access elements in the DOM through unique selector names. 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.

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

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

...

How Infusion Components Use the DOM Binder

Each standard Fluid component has a DOM binder created automatically as a result of its call to the standard framework function initView. This call takes a set of options from the member selectors from the component's top-level options, and uses them to initialise the DOM binder.

...

Code Block
javascript
javascript
that.locate(name, localContainer);

...

Parameter

...

Description

...

name

...

The selector name, as declared in the component's defaults

...

localContainer

...

(For information about parameters, for this and other DOM Binder functions, see DOM Binder API.)

Other methods on the DOM Binder - caching

...