This documentation is currently being moved to our new documentation site.
Please view or edit the documentation there, instead.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.
DOM Binder API
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 |
|---|---|---|
| Object | the root element in which to locate named elements |
| 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"
}
}
}
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 |
|---|---|---|
| String | The selector name, as declared in the component's |
| 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 |
|---|---|---|
| String | The selector name, as declared in the component's |
| 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
refreshrather than just a single one.
Parameter | Type | Description |
|---|---|---|
| String or Array of Strings | The selector name or names to refresh, as declared in the component's |
| Object | Optional. The container element used to constrain the search for the element. Defaults to the component container. |