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"
        }
    }
}

On This Page

See Also

DOM Binder

Still need help?

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

Methods

locate

locate(name[, localContainer]);

Finds the named element within the specified container.

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

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

clear()

The clear() method 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

refresh(names[, localContainer]);

The refresh() method 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. Defaults to the component container.

Browser not supported