| Section | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
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 | ||||
|---|---|---|---|---|
| ||||
fluid.defaults("fluid.newComponent", {
selectors: {
uiBit1: ".className1",
uiBit2: ".className2"
}
});
|
When the view View is initialised with fluid.initView(), the DOM binder is created and attached to the top-level that(the component itself) as the member named dom. In addition, or convenience, the DOM Binder's locate() function is added as a top-level instance memember on the view View. For example, to get a named element, you can simply call that.locate(name)) (see below for more information).
The other crucial configuration passed to the DOM binder is the overall container for the component - by convention, this is passed as the first argument to the component's constructor function (recall that the standard signature for a fluid component is fluid.componentName(container, options). Unless they are otherwise qualified, all searches performed by the DOM binder attached to a particular component will be automatically scoped to its own container.
Using the DOM Binder
The component must use the DOM Binder for any access to the DOM elements that make up the component, using the locate() function:
...
(For information about parameters, for this and other DOM Binder functions, see DOM Binder API.)
Other methods on the DOM Binder - caching
The other methods on the DOM Binder are less frequently used, and are not attached to the top-level that in the way that locate() is. They need to be accessed through the DOM Binder's own object, which by initView is available as that.dom.
...
- 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.
Example (Inline Edit)
The Inline Edit component requires three parts in its user interface:
...