| Section |
|---|
| Column |
|---|
| DOM Binder OverviewThe purpose of the DOM Binder is to relax the coupling between a component and its markup. Whilst the Fluid framework is built on jQuery, and uses that framework's selector engine throughout to perform queries on the DOM, the extra level of indirection provided by the DOM Binder allows a complete separation of concerns. Fluid components are parameterised by a set of named selectors, managed by the DOM Binder instance attached to each top-level component. In this way, explicit selectors never appear in component code - leaving the components free of any baked dependence on markup structure. There are other benefits to having DOM searches (via jQuery) managed in a central location - component authors can get access to fine-grained control over caching and lifetime of search results, which might otherwise become expensive if performed repeatedly - along with its basic locate() method, each DOM binder has a fastLocate() method which will not perform a DOM search if there is a cached result. Components access elements in the DOM through unique selector names. The component defines default values for the selectors, but implementors are free to override the defaults if they need to change the structure of the markup. |
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| borderStyle | solid |
|---|
| title | On This Page | borderStyle
|---|
| | solid |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | See Also | borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #cccccc |
|---|
| borderStyle | solid |
|---|
| title | Still need help? |
|---|
| borderStyle | solid |
|---|
| Join the infusion-users mailing list and ask your questions there. |
|
|
...
| 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 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.
...