| Include Page |
|---|
| sneak peek warning |
|---|
| sneak peek warning |
|---|
|
Overview
| Excerpt |
|---|
If you are creating a component that requires the use of the Renderer, use the new fluid.initRendererComponent function in your component creator function: |
...
my.component = function (container, options) {
var that = fluid.initRendererComponent("my.component", container, options);
...
return that;
}
|
This new function automates the work of 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 fluid.initRendererComponent will also understand certain options specific to the Renderer:
| Include Page |
|---|
| initRendererComponent Options |
|---|
| initRendererComponent Options |
|---|
|
Events for Renderer-bearing Components
...
| 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 |
|---|
|
...
| Code Block |
|---|
|
that.render(tree);
|
Expands the provided tree, generates cutpoints, and renders the tree.
...
| 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.
...
| 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.
...
| Code Block |
|---|
|
(function ($, fluid) {
fluid.examples.rederer = function (container, options) {
var that = fluid.initRendererComponent("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,
},
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"
}
}
});
})
|
...
| 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>
|
...