Recommended Ways of Using the Renderer
New in v1.3: Option 1: Renderer-bearing Component
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
, usingoptions.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 asthat.render(tree);
IMPORTANT NOTE: This functionality is Sneak Peek Status, so the APIs will change. Please use it only if you are not dependent to a stable API.
For more information on how to work with renderer-bearing components, see Renderer-bearing Components.
Option 2: fluid.render
If you are not using fluid.initRendererComponent
, you can use the primary renderer function, fluid.render
:
var template = fluid.render(source, target, tree, options);
This function can be used at any time to render a component tree. This function will render the component tree into the target
node, using the source
(which either references a DOM node or contains a string) as the template.
For detailed information on how to use this function, see fluid.render
.
Option 3: fluid.selfRender
This function is similar to fluid.render
, except that it assumes that the markup used to source the template is within the target node:
var template = fluid.selfRender(node, tree, options);
For detailed information on how to use this function, see fluid.selfRender
.
Other Renderer Functions
In addition to these primary ways of using the Renderer, there are a several other functions that are useful in certain circumstances. These are described here.
fluid.reRender
For detailed information on how to use this function, see fluid.reRender
.
fluid.fetchResources
For detailed information on how to use this function, see fluid.fetchResources
.