Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

How To Use The Renderer

Owned by Anastasia Cheetham
Last updated: Jun 16, 2011Version comment
1 min read

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, 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);

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.