Page Comparison

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

fluid.defaults("my.component", ={
function (container, options) { gradeNames: ["fluid.rendererComponent", "autoInit"],
 var that = fluid.initRendererComponent("my.component", container, options);
. // put your options here
   ... 
});

var return 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);

(function ($, fluid) {
    fluid.examples.rederer = function (container, options) {
        var that = fluid.initRendererComponentdefaults("fluid.examples.rederer", container, options);
        that.renderer.refreshView();

        return that;   
    };

    fluid.defaults("fluid.examples.rederer", {
        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");