DOM Binder API

Edit on GitHub

The DOM Binder provides a degree of separation between a component and its interface by handling any interaction the component may have with its markup.

See the DOM Binder documentation for more information about how DOM Binders work.

Note: A DOM Binder is automatically created by the Framework for any view component. Component developers are not expected to ever create a DOM Binder themselves.

Creation

The Framework creates a DOM Binder as follows:

that.dom = fluid.createDomBinder (container, selectors);

The DOM Binder object is attached to the component as a member called dom.

Parameters

Parameter Type Description
container Object the root element in which to locate named elements
selectors Object a collection of named jQuery selectors, of the form 
{
    name1: <selector1>,
    name2: <selector2>
    // ..
}
Note that selector values may be specified using IoC references to other selectors or expanders.

Selector Examples

{
    displayElement: ".flc-progress",
    progressBar: ".flc-progress-bar",
    indicator: ".flc-progress-indicator",
    label: ".flc-progress-label",
    ariaElement: ".flc-progress-bar"
}

{
    labelSource: ".flc-reorderer-imageTitle",
    movables: {
        expander: {
            funcName: "fluid.reorderImages.createImageCellFinder",
            args: "{that}.container"
        }
    }
}

Methods

locate

var elementByName = locate(name);

// or

var elementByNameAndContainer = locate(name, localContainer);

Finds the named element within the specified container. If the value of the selector is the empty string "", the container itself will be returned. If the selector matches nothing within the container, an empty jQuery (one with 0 elements) will be returned.

Return: a jQuery object.

Parameter Type Description
name String The selector name, as declared in the component's defaults
localContainer Object Optional. The container element used to constrain the search for the element. Defaults to the component container.

fastLocate

var elementByName =  fastLocate(name);

// or

var elementByNameAndContainer = fastLocate(name, localContainer);

Finds the named element within the specified container, using the value in the DOM Binder's cache if present (i.e. the DOM itself will not be searched again). The DOM binder's cache is populated for a query, whenever a query is submitted via locate().

Return: a jQuery object.

Parameter Type Description
name String The selector name, as declared in the component's defaults
localContainer Object Optional. The container element used to constrain the search for the element. Defaults to the component container.

clear

that.dom.clear();

Completely clears the cache for the DOM binder for all queries. It should be used whenever, for example, the container's markup is replaced completely, or otherwise is known to change in a wholesale way.

refresh

that.dom.refresh(names);

// or

that.dom.refresh(names, localContainer);

Refreshes the cache for one or more selector names, ready for subsequent calls to fastLocate(). It functions exactly as for a call to locate() except that

  • The queried results are not returned to the user, but simply populated into the cache, and
  • More than one selector name (as an array) may be sent to refresh rather than just a single one.
Parameter Type Description
names String or Array of Strings The selector name or names to refresh, as declared in the component's defaults
localContainer Object Optional. The container element used to constrain the search for the element(s). Defaults to the component container..