...
Include Page |
---|
| sneak peek warning |
---|
| sneak peek warning |
---|
|
Overview
Excerpt |
---|
If you are creating a component that requires the use of the Renderer, you should use the new fluid.initRendererComponent function rendererComponent grade as a parent grade in your component creator function's defaults block: Code Block |
---|
| fluid.defaults("my.component", ={
function (container, options) { gradeNames: ["fluid.rendererComponent", "autoInit"],
var that = fluid.initRendererComponent("my.component", container, options);
. // put your options here
...
});
var return that; }
= my.component(); |
This new function automates the work of constructing a component creator function, applying the Renderer, fetching templates, configuring cutpoints based on the DOM binder, as well as localisation via the string bundle. This function will: - create
that.model , using options.model if available (creating an empty object if not) - fetch any resources (such as HTML templates, etc.) specified in
options.resources - create a renderer function and attach it to your
that object as that.render(tree);
|
Options for Renderer-bearing Components
While developers are free to define whatever options they like for their component, a component initialised with descended from fluid.
initRendererComponent will rendererComponent
will also understand certain options specific to the Renderer:
Include Page |
---|
| initRendererComponent Options |
---|
| initRendererComponent Options |
---|
|
Events for Renderer-bearing Components
prepareModelForRender
Div |
---|
|
Description | This event fires before the generation of protoTree. Whatever adjustment on the model, which is the protoTree is generated based on, is ideal to be performed at this event. |
---|
Parameters | model The internal Model Component that is used by this renderer component.
applier The internal Change Applier Component that is used by this renderer component.
that The reference to the current renderer component.
|
---|
Returns | None |
---|
Note | The first event to be fired before events "onRenderTree" and "afterRender". |
---|
Availability | Infusion 1.4 and later |
---|
|
onRenderTree
Div |
---|
|
Description | This event fires right before protoTree is rendered. This event is ideal for the final manipulation of the fully expanded protoTree. |
---|
Parameters | that The reference to the current renderer component.
tree Expanded renderer tree.
|
---|
Returns | None |
---|
Note | The event fired after "prepareModelForRender" and before "afterRender". |
---|
Availability | Infusion 1.4 and later |
---|
|
afterRender
Div |
---|
|
Description | This event fires after protoTree is rendered. |
---|
Parameters | that The reference to the current renderer component.
|
---|
Returns | None |
---|
Note | The event fired after "onRenderTree" and "afterRender". |
---|
Availability | Infusion 1.4 and later |
---|
|
Note: The 3 events are fired in the order of prepareModelForRender, onRenderTree, afterRender. They are only intended for use by experts.
Functions on that
render(tree)
Code Block |
---|
|
that.render(tree);
|
Expands the provided tree, generates cutpoints, and renders the tree.
produceTree()
Code Block |
---|
|
that.produceTree();
|
This function is only present if a protoTree has been provided in the options. This function can be overridden by providing a produceTree in the options.
refreshView()
Code Block |
---|
|
that.refreshView();
|
This function simply calls that.render(that.produceTree());
This function is only present if a protoTree has been provided in the options.
Example to render a drop down list box
Code Block |
---|
|
(function ($, fluid) {
fluid.examples.rederer = function (container, options) {
var that = fluid.initRendererComponentdefaults("fluid.examples.rederer", container, options);
that.renderer.refreshView();
return that;
};
fluid.defaults("fluid.examples.rederer", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
selectors: {
textFont: ".flc-examples-text-font",
notInProtoTree: ".flc-examples-not-in-protoTree"
},
// "selectorsToIgnore" is an array of all the selectors
// that are defined in "selectors" but not used in
// "protoTree". It tells renderer not to generate cutpoints
// for these selectors.
selectorsToIgnore: ["notInProtoTree"],
model: {
textFontNames: ["Serif", "Sans-Serif", "Arial"],
textFontList: ["serif", "sansSerif", "arial"],
textFontValue: ""
},
rendererOptions: {
autoBind: true,
},
renderOnInit: true,
protoTree: {
// "textFont" is an ID that is defined in "selectors"
// option
textFont: {
// "textFontNames", "textFontList", "textFontValue"
// must be defined in "model"
optionnames: "${textFontNames}",
optionlist: "${textFontList}",
selection: "${textFontValue}"
}
}
resources: {
template: {
forceCache: true,
url: "examples-rederer.html"
}
}
});
})
var that = fluid.examples.renderer("#options"); |
The template "examples-rederer.html" looks like,
Code Block |
---|
|
<form id="options" action="">
<label for="text-font" class="fl-label">Font style:</label>
<select class="flc-examples-text-font" id="text-font">
</select>
</form>
|
This example uses a renderer component to generate a drop down list box. fluid.initRendererComponent()
. The option "protoTree
" is is the key option that establishes the binding between the "selectors" and data presented in "model". See Component Tree Expanders
for more usage of "protoTree".