Page Comparison

...

Type

Description

Format

Example

Bound

A control which holds a single value, such as headers, labels, etc.

Code Block

	javascript
	javascript

componentID: { fieldName: valueOrBinding }

Code Block

	javascript
	javascript

var protoTree = {
    mainHeader: "Carving Woods",
    sectionHeader1: "Sassafras",
    sectionHeader1: "Butternut",
    sectionHeader1: "Basswood"
};

Array of Bound

repeated Bound fields

Code Block

	javascript
	javascript

componentID: { fieldName: [valueOrBinding1,
                           valueOrBinding2,
                          ...] }

Code Block

	javascript
	javascript

var protoTree = {
    mainHeader: "Carving Woods",
    sectionHeaders: ["Sassafras",
                     "Butternut",
                     "Basswood"]
};

Selection

A selection control where a user chooses either one or many options from a set of alternatives, such as a drop-down

Code Block

	javascript
	javascript

componentID: {
    selection: valueOrBinding,
    optionlist: [array of internal values],
    optionnames: [array of display strings]
}

For information on how to create trees for radio buttons and checkboxes, see Renderer Component Tree Expanders.

Code Block

	javascript
	javascript

var protoTree = {
    contact-addressType1: {
        selection: "${fields.addressType1}",
        optionlist: ["Home", "Work"],
        optionnames: ["home", "work"]
    }
};

Link

A reference to a URL, such as a hyperlink

Code Block

	javascript
	javascript

componentID: {
    target: destinationUrl,
    linktext: stringToDisplay
}

Code Block

	javascript
	javascript

var protoTree = {
    contact-addressType1: {
        target: "http://company.com/help/${topic.url}",
        linktext: "${topic.name}"
    }
};

Container

A component that contains other components in a free-form way

Code Block

	javascript
	javascript

componentID: {
    children: [array of other protocomponents]
}

Message

A component that encapsulates the data needed to resolve a localised message. Similar to a Bound, but the value is a key into a string bundle

Code Block

	javascript
	javascript

componentID: {
    messageKey: key,
    args: [array of arguments to
           be interpolated into
           the message format]
}

See fluid.formatMessage for more information about message formatting.

Code Block

	javascript
	javascript

var protoTree = {
    instructions: {
        messageKey: "instructionKey",
        args: ["thing", 3, "%path1"]
    }
};

Versions Compared

Old Version 7

New Version 8

Key