How To Use The Renderer

There are several different ways to use the Infusion Renderer, including the recommended Renderer Component and various Renderer functions.

Recommended Ways of Using the Renderer

Renderer Component

If you are creating a component that requires the use of the Renderer, you should use the fluid.rendererComponent grade as a parent grade in your component's defaults block:

fluid.defaults("my.component", {
    gradeNames: ["fluid.rendererComponent"]
    // put your options here
});

var that = my.component();

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

For detailed information on how to use this method, see Renderer Components.

fluid.render

If you are not using fluid.rendererComponent, 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.

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.