Versions Compared

Old Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 3

changes.mady.by.user Anastasia Cheetham

Saved on

Key

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

Creation

*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.

The Framework creates a DOM Binder as follows:

Code Block
javascript
javascript

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

*

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

Code Block
javascript
javascript
{
    name1: <selector1>,
    name2: <selector2>,
    ....
}

Note that selector values may be specified using IoC references to other selectors or expanders.

Selectors Examples

Code Block
javascript
javascript
{
    displayElement: ".flc-progress",
    progressBar: ".flc-progress-bar",
    indicator: ".flc-progress-indicator",
    label: ".flc-progress-label",
    ariaElement: ".flc-progress-bar"
}
Code Block
javascript
javascript
{
    labelSource: ".flc-reorderer-imageTitle",
    movables: {
        expander: {
            funcName: "fluid.reorderImages.createImageCellFinder",
            args: "{that}.container"
        }
    }
}
Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2maxLevel5
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.

...

Methods

...

locate

Code Block
javascript
javascript

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

Code Block
javascript
javascript

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

Code Block
javascript
javascript

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

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.