Page Comparison

Include Page

	sneak peek warning
	sneak peek warning

Div

class	floatRight

Panel

borderColor	#ccc
bgColor	#fff
borderStyle	solid
title	On This Page
borderStyle	solid

Table of Contents

minLevel	2

...

Section

Column

Code Block

	javascript
	javascript


var protoTree = {
    expander: {
        type: "fluid.renderer.repeat",
        repeatID: "recordType",
        controlledBy: "recordlist.name",
        pathAs: "elementPath",
        tree: { value: "${{elementPath}}" }
    }
};

Column

width	50%

This prototree to the left uses the "fluid.renderer.repeat" expander (described in more detail below), which repeats the provided tree based on the data found in data model at the path specified by controlledBy. The expander saves the developer the work of having to create a prototree with an array of Bound components with a ":" at the end of the ID (indicating a repeated element), one for each piece of data in the data model:

Code Block

	javascript
	javascript


var protoTree = {
    recordType: {
        children: [
            { "recordType:": "${recordlist.name.0}" },
            { "recordType:": "${recordlist.name.1}" },
            { "recordType:": "${recordlist.name.2}" },
            { "recordType:": "${recordlist.name.3}" },
            ...
        ]
    }
};

...

Code Block

	javascript
	javascript


var tree = {
    expander: {
        type: "fluid.renderer.repeat",
        repeatID: "tab:",
        ....
    }
};

...

Code Block

	javascript
	javascript


var tree = {
    expander: [
        {
            type: "fluid.renderer.repeat",
            repeatID: "tab:",
            ....
        },
        {
            type: "fluid.renderer.selection.inputs",
            selectID: "language",
            ....
        },
        ....
    ]
};

...

Section

Column

Code Block

	javascript
	javascript


cspace.tabsList.modelToTree = function (model, options) {
    var tree = {
        expander: {
            type: "fluid.renderer.repeat",
            repeatID: "tab:",
            controlledBy: "tabs",
            pathAs: "tabInfo",
            tree: {
                tabLink: {
                    target: "${{tabInfo}.href}",
                    linktext: {
                        messagekey: "${{tabInfo}.name}"
                    }
                }
            }
        }
    };
    return tree;
};

Column
In this example, the `fluid.renderer.repeat` expander is being used to declare a tree for a set of tabs. The `controlledBy` property indicates that the data model field of `tabs` contains the data to be used.

...

Code Block

	javascript
	javascript


var tree = {
    expander: {
        type: "fluid.renderer.selection.inputs",
        rowID: "layout",
        labelID: "layoutLabel",
        inputID: "layoutChoice",
        selectID: "layout-checkbox",
        tree: {
            selection: "${layouts.selection}",
            optionlist: "${layouts.choices}",
            optionnames: "${layouts.names}"
        }
    }
};

...

Section

Column

Code Block

	javascript
	javascript


expander: {
    type: "fluid.renderer.condition",
    condition: that.options.showDeleteButton,
    trueTree: {
        deleteButton: {
            decorators: [{
                type: "attrs",
                attributes: {
                    value: that.options.strings.deleteButton
                }
            }, {
                type: "jQuery",
                func: "prop",
                args: {
                    disabled: that.checkDeleteDisabling
                }
            }]
        }
    }
}

Column
In this example, the `condition` is `that.options.showDeleteButton`. The renderer will evaluate the component's `showDeleteButton` option and if it is `true` will use the component tree specified by `trueTree`. Note that no `falseTree` is provided. If the option is `false` or not present, nothing will be rendered.

Section

Column

Code Block

	javascript
	javascript


expander: {
    type: "fluid.renderer.condition",
    condition: that.showMediumImage(),
    trueTree: {
        mediumImage: {
            decorators: [{
                type: "addClass",
                classes: that.options.styles.mediumImage
            }, {
                type: "attrs",
                attributes: {
                    alt: that.options.strings.mediumImage,
                    src: that.options.recordModel.fields
                           && that.options.recordModel.fields.blobs
                             && that.options.recordModel.fields.blobs.length > 0 ? 
                        that.options.recordModel.fields.blobs[0].imgMedium : ""
                }
            }]
        },
        mediaSnapshot: {
            decorators: [{
                type: "addClass",
                classes: that.options.styles.mediaSnapshot
            }]
        }
    },
    falseTree: {
        mediaSnapshot: {}
    }
}

Column
In this example, the `condition` is the return value of a call to `that.showMediumImage()`. If the function returns `true`, the image should be shown, and the `trueTree` component subtree will be used to render it. If the return value is `false`, the image should not be shown, and the `falseTree` subtree will be used to properly render the "empty space" instead of an image.

Section

Column

Code Block

	javascript
	javascript


expander: {
    type: "fluid.renderer.condition",
    condition: {
        funcName: "cspace.header.assertMenuItemDisplay",
        args: "${{itemName}.hide}"
    },
    trueTree: {
        label: {
            target: "${{item}.href}",
            linktext: {
                messagekey: "${{item}.name}"
            }
        }
    }
}

Column
In this example, the `condition` is a call to the function `cspace.header.assertMenuItemDisplay()` with a particular argument taken from the "itemName" subcomponent. If the function call returns `true`, the renderer component subtree specified by `trueTree` will be used.

Versions Compared

Old Version 23

New Version Current

Key