fluid.initRendererComponent(componentName, container, options)| Section |
|---|
| Column |
|---|
| DEPRECATED: Manual creation of components is discouraged. Instead, use the fluid.rendererComponent and autoInit grade names. For more information, see Component Grades and Component Lifecycle and autoInit. An initialiation method that can be called as the first act of any component that uses the Infusion Renderer. This function automatically initializes the Renderer in addition to merging user options with defaults, attaching a DOM Binder to the instance, and configuring events. | Code Block |
|---|
| javascript |
|---|
| javascript |
|---|
| bgColor | white |
|---|
| borderStyle | nonejavascript |
|---|
| fluid.initRendererComponent(componentName, container, options);
|
File name: RendererUtilities.js Parameters| Span |
|---|
| componentName
| (String) The unique "name" of the component, which will be used to fetch the default options from store. By recommendation, this should be the global name of the component's creator function. | container
| (jQueryable) A specifier for the single root "container node" in the DOM which will house all the markup for this component. | options
| (Object) The configuration options for this component |
|
Return Value| Span |
|---|
| Object | A renderer-bearing component object. |
|
|
|
OptionsAs with any component initialization function, the options object will be merged with any defaults found for the componentName, and the result will be attached to the returned object. In general, options are specific to each component. This renderer initialization function, however, recognizes certain particular options that will be used to configure the renderer. A component may wish to define defaults for some of these options. Others will be provided by the component user (e.g. model). The renderer-specific options are: | Include Page |
|---|
| initHow To Use The RendererComponent Options |
|---|
| initHow To Use The RendererComponent Options |
|---|
|
Renderer Function OptionsThe fluid.initRendererComponent initializer will create a render function that will be attached to the that object. The options parameter includes an options called rendererFnOptions that can contain options that will control the behaviour of the renderer function. The following renderer function options are supported: | Insert excerpt |
|---|
| createRendererFunction Options |
|---|
| createRendererFunction Options |
|---|
| nopanel | truecreateRendererFunction Options |
|---|
|
Renderer OptionsThe render function will use the Infusion Renderer to render the component. The Renderer itself can be configured using options, which can be provided using the rendererOptions option. The following renderer options are supported: | Insert excerpt |
|---|
| renderer Options |
|---|
| renderer Options |
|---|
| nopanel | truerenderer Options |
|---|
|
Example| Section |
|---|
| Column |
|---|
| Code Block |
|---|
| // Declare defaults for the component
fluid.defaults("cspace.autocomplete.popup", {
selectors: {
addToPanel: ".csc-autocomplete-addToPanel",
authorityItem: ".csc-autocomplete-authorityItem",
noMatches: ".csc-autocomplete-noMatches",
matches: ".csc-autocomplete-matches",
matchItem: ".csc-autocomplete-matchItem",
longestMatch: ".csc-autocomplete-longestMatch",
addTermTo: ".csc-autocomplete-addTermTo"
},
repeatingSelectors: ["matchItem", "authorityItem"],
resources: {
template: {
href: "html/AutocompleteAddPopup.html"
}
},
....
};
// Component creator function
cspace.autocomplete.popup = function(container, options) {
var that = fluid.initRendererComponent("cspace.autocomplete.popup", container, options);
...
return that;
};
|
|
| Column |
|---|
This example uses fluid.initRendererComponent() to initialize a component called cspace.autocomplete.popup. The defaults for the component include defaults for several renderer-specific options: selectors, repeatingSelectors and resource. The that object that is returned by the call to fluid.initRendererComponent() will include a render() function that can be used to render the data model provided by the implementor, using the provided selectors. The HTML file referenced by template.href will be retrieved and stored back in the template for use by the component. |
|
|