Renderer Components

Overview

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", "autoInit"],
    .. // put your options here
    
});

var that = my.component();

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

Options for Renderer-bearing Components

While developers are free to define whatever options they like for their component, a component descended from fluid.rendererComponent will also understand certain options specific to the Renderer:

Events for Renderer-bearing Components

prepareModelForRender

onRenderTree

afterRender

Note: The 3 events are fired in the order of prepareModelForRender, onRenderTree, afterRender. They are only intended for use by experts.

Functions on `that`

render(tree)

that.render(tree);

Expands the provided tree, generates cutpoints, and renders the tree.

produceTree()

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.

refreshView()

that.refreshView();

This function calls that.render(that.produceTree()); This function is only present if a protoTree has been provided in the options.

Example to render a drop down list box

    fluid.defaults("fluid.examples.renderer", {
        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,
        },
        renderOnInit: 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"
            }
        }
    });


var that = fluid.examples.renderer("#options");

The template "examples-rederer.html" looks like,

<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>

This example uses a renderer component to generate a drop down list box. The protoTree is the key option that establishes the binding between the "selectors" and data presented in "model".

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

Renderer Components

Overview

Options for Renderer-bearing Components

Events for Renderer-bearing Components

prepareModelForRender

onRenderTree

afterRender

Functions on `that`

render(tree)

produceTree()

refreshView()

Example to render a drop down list box

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

Renderer Components

Overview

Options for Renderer-bearing Components

Events for Renderer-bearing Components

prepareModelForRender

onRenderTree

afterRender

Functions on that

render(tree)

produceTree()

refreshView()

Example to render a drop down list box

Functions on `that`