Component Configuration Options

fluid.defaults("component.name", {
    gradeNames: "fluid.modelComponent",
    // ...
});

fluid.defaults("component.name", {
    invokers: {
        inv1: {
            // ...
        },
        inv2: {
            // ...
        }
    }
    // ...
});

fluid.defaults("component.name", {
    members: {
        member1: "{that}.options.optionsValue",
        member2: "{theOther}.dom.otherSelector",
    },
    // ...
});

The Framework will create event firers for the listed events. The builtin events onCreate, onDestroy and afterDestroy will be fired automatically by the framework. It is the responsibility of the component to fire user-defined events at the appropriate times.

fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    }
    //...
});

Both component developers and integrators can define listeners for events. Invokers and the fire method of other events can be used as listeners here, as well as any function handle resulting from an Expanders. Note that as well as being a simple string holding the name of an event on this component, a listener key may also be a full IoC Reference to any other event held in the component tree (for example "{parentComponent}.events.parentEvent". As well as being a simple function name, the value associated with the key may be a Listener Record or else follow the syntax of an invoker indicating that the registered listener receives a different signature from the one that the event has fired (see Event injection and boiling).

examples.myListener = function (number, condition) {
    console.log("Event listener received number " + number + " and condition " + condition);
};
<p>fluid.defaults("examples.eventedComponent", {
gradeNames: ["fluid.component"],
events: {
myEvent: null
},
listeners: {
"myEvent.myNamespace": "examples.myListener"
}
});

var myComp = examples.eventedComponent({
    listeners: {
        "myEvent.myNamespace": "examples.myOtherListener",
    }
});

1. the original defaults record,
2. the subcomponent record,
3. direct user options (supplied to a component creator function),
4. distributed options.

fluid.defaults("component.name", {
    components: {
        subcomponent1: {
            type: "component.subcomp1",
            options: {...}
        }
        // ...
    }
    // ...
});

fluid.defaults("component.name", {
    gradeNames: ["fluid.component"],
    distributeOptions: {
        namespace: "myDistribution",
        record: "another.grade.name",
        target: "{that target.grade.name}.options.gradeNames"
    }
    // ...
});

It is uncommon to need this option. The most common use case is to protect "exotic values" derived from some external library or framework from being corrupted by the options merging/expansion process by use of the "nomerge" policy. For example, some noxious circularly-liked structure such as a node.js HTTP request object should be protected in such a way. The 2.0 framework will automatically protect an object which fails the fluid.isPlainObject test, which will exclude any object with a nondefault constructor or native type such as DOM elements, TypedArrays, Infusion components themselves, etc.

fluid.defaults("component.name", {
    mergePolicy: {
        option1: "noexpand",
        option2: "nomerge"
        // ...
    }
    // ...
});

fluid.defaults("component.name", {
    dynamicComponents: {
        dynamic1: {
            type: "component.subcomp1",
            source: "{context}.someArray",
            options: {
                // ...
            }
        }
        // ...
    }
    // ...
});

fluid.defaults("fluid.pager", {
    model: {
        pageIndex: undefined,
        pageSize: 10,
        totalRange: undefined
    }
    // ...
});

var myPager = fluid.pager(container, {
    model: {
        pageIndex: 1
    }
    // ...
});

A record defining a set of functions wishing to be notified of changes to the model

fluid.defaults("fluid.tests.allChangeRecorder", {
    gradeNames: "fluid.tests.changeRecorder",
    modelListeners: {
        "": "{that}.record({change}.path, {change}.value, {change}.oldValue)"
    }
});

fluid.defaults("examples.volumeModelRelay", {
    gradeNames: ["fluid.modelComponent"],
    model: {
        volumeAsPercent: 95,
    },
    modelRelay: {
        source: "volumeAsPercent",
        target: "volumeAsFraction",
        singleTransform: {
            type: "fluid.transforms.linearScale",
            factor: 0.01
        }
    }
});

A record containing named CSS-based selectors identifying where in the DOM relative to the component's container different elements can be found.

fluid.defaults("fluid.progress", {
    selectors: {
        displayElement: ".flc-progress",
        progressBar: ".flc-progress-bar",
        indicator: ".flc-progress-indicator",
        label: ".flc-progress-label",
        ariaElement: ".flc-progress-bar"
    }
    // ...
});

var myEdit = fluid.progress(container, {
    selectors: {
        indicator: "div.progress-indicator",
        label: "span.progress-label"
    }
    // ...
});

fluid.defaults("demo.initGridReorderer", {
    gradeNames: ["fluid.reorderGrid"],
    styles: {
        dragging: "demo-gridReorderer-dragging",
        avatar: "demo-gridReorderer-avatar",
        selected: "demo-gridReorderer-selected",
        dropMarker: "demo-gridReorderer-dropMarker"
    },
    disableWrap: true
});

fluid.defaults("cspace.header", {
    selectors: {
        menuItem: ".csc-header-menu-item",
        label: ".csc-header-link",
        searchBox: ".csc-header-searchBox",
        logout: ".csc-header-logout",
        user: ".csc-header-user",
        userName: ".csc-header-userName"
    },
    selectorsToIgnore: ["searchBox", "logout"]
    // ...
});

fluid.defaults("cspace.header", {
    selectors: {
        menuItem: ".csc-header-menu-item",
        label: ".csc-header-link",
        searchBox: ".csc-header-searchBox",
        logout: ".csc-header-logout",
        user: ".csc-header-user",
        userName: ".csc-header-userName"
    },
    repeatingSelectors: ["menuItem"]
    // ...
});

NOTE that if both produceTree and protoTree are specified, only the produceTree function will be used; the protoTree will be ignored.

cspace.confirmationDialog.produceTree = function (that) {
    var tree = {
        // ...
    };
    return tree;
};
fluid.defaults("cspace.confirmationDialog", {
    produceTree: cspace.confirmationDialog.produceTree
    // ...
});

fluid.defaults("cspace.searchTips", {
    protoTree: {
        searchTips: {decorators: {"addClass": "{styles}.searchTips"}},
        title: {
            decorators: {"addClass": "{styles}.title"},
            messagekey: "searchTips-title"
        },
        expander: {
            repeatID: "instructions",
            type: "fluid.renderer.repeat",
            pathAs: "row",
            controlledBy: "messagekeys",
            tree: {
                messagekey: "${{row}}"
            }
        }
    }
    // ...
});

var searchTips = cspace.searchTips(container, {
    protoTree: {
        searchTips: {decorators: {"addClass": "{styles}.searchTips"}},
        title: {
            decorators: {"addClass": "{styles}.title"},
            messagekey: "searchTips-title"
        },
        expander: {
            repeatID: "instructions",
            type: "fluid.renderer.repeat",
            pathAs: "row",
            controlledBy: "messagekeys",
            tree: {
                messagekey: "${{row}}"
            }
        }
    },
    // ...
});

fluid.defaults("component.name", {
    resources: {
        headerTemplate: {
            href: "../templates/Header.html"
        },
        footerTemplate: {
            href: "../templates/Footer.html"
        }
    }
    // ...
});

var myComp = component.name(container, {
    resources: {
        footerTemplate: {
            href: "../templates/FrontPageFooter.html"
        }
    }
    // ...
});

fluid.defaults("cspace.searchToRelateDialog", {
    gradeNames: ["fluid.rendererComponent"],
    strings: {
        createNewButton: "Create",
        title: "Add Related %recordType Record",
        closeAlt: "close button",
        relationshipType: "Select relationship type:",
        createNew: "Create new record:",
        addButton: "Add to current record"
    }
    // ...
});

var myDialog = cspace.searchToRelateDialog(container, {
    strings: {
        relationshipType: "Select a relationship type from the list below:",
        createNew: "Create a new record:",
        addButton: "Add this record to the current record"
    }
    // ...
});

fluid.defaults("fluid.tableOfContents.levels", {
    rendererFnOptions: {
        noexpand: true
    }
    // ...
});

var recEditor = cspace.recordEditor(container, {
    rendererFnOptions: {
        rendererTargetSelector: "dialog"
    }
    // ...
});

fluid.defaults("cspace.searchBox", {
    rendererOptions: {
        autoBind: false
    }
    // ...
});

var search = cspace.searchBox(container, {
    rendererOptions: {
        autoBind: true
    }
    // ...
});

fluid.defaults("cspace.login", {
    gradeNames: ["fluid.rendererComponent"],
    renderOnInit: true
    // ...
});

var login = cspace.login(container, {
    renderOnInit: false
    // ...
});