Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


Grade Name"Relay" Version [*]Description


 A special directive grade that instructs the framework to automatically construct a globally named creator function (with the same name as the grade) responsible for the construction of the component. NOTE: for the Infusion 2.0 release this grade will become redundant as it will be the default for every grade


 A "little" component is the most basic component: it supports options merging with defaults (Little Components). All Fluid components are derived from this grade, and in general all things not derived from this grade are non-components (e.g. plain functions, or model transformation transforms, etc.)



A "model" component is already a little component that additionally provides supports for a component's model, defined in the components options, and operations on it (Model Components).


 An "evented" component is already a little component that additionally instantiates event firers based on default framework events (onCreate, onDestroy, onDetach) and events declared in the options (Tutorial - Evented Components).



A compound of fluid.modelComponent and fluid.eventedComponent



A "view" component is a fluid.standardComponent is bound to a DOM container node, holds a DOM Binder and supports a view (View Components).



A "renderer" component is already a vew component that bears a renderer. There are additional features provided by this component grade specified on the Useful functions and events section of the Tutorial - Renderer Components page

[*] About the special "relay" grades - as part of the work on the New ChangeApplier coming up to the 1.5 release of Infusion, every standard grade descended from fluid.modelComponent has acquired a parallel version including the word "relay" that allows access to the new ChangeApplier on an "opt in basis". During the course of 2014 we will be incrementally updating each Infusion component to the new "relay" grades, and once this work is complete, the "relay" grades will be renamed back to their standard (left column) names and the old ChangeApplier implementation will be abolished.


Code Block
var myCombinedComponent = examples.componentOne({
    gradeNames: "examples.componentTwo"
    }); // creates a component that behaves exactly (except for its typeName) 
        // as if it was created via examples.combinedComponent() above


Another possibility is to supply the additional gradeNames via a subcomponent record - for example

Code Block
fluid.defaults("examples.rootComponent", {
    components: {
        myCombinedComponent: { // This component also behaves (except for typeName) 
                               // as if was created via examples.combinedComponent
            type: "examples.componentOne",
            options: {
                gradeNames: "examples.componentTwo"


Code Block
fluid.defaults("fluid.componentWithDynamicGrade", {
    gradeNames: ["fluid.littleComponent", "autoInit", "{that}.getDynamicGradeName"],
    invokers: {
        getDynamicGradeName: "fluid.componentWithDynamicGrade.getDynamicGradeName"

// When resolved our fluid.componentWithDynamicGrade will have all the functionality of a fluid.modelComponent grade.
// NOTE: developers can also return an array of grade names. These grade names can be custom grade names.
fluid.componentWithDynamicGrade.getDynamicGradeName = function () {
    return "fluid.modelComponent";


Grade Linkage

 A powerful scheme for producing components whose grade content depends on combinations of other grades, or else to "advise" an already existing grade to append further grades into its components without redefining it, is grade linkage. In the current framework this is an experimental and extremely expensive (in CPU) facility which is only available on an "opt-in" basis, although it will be optimised and refined in future versions of the framework. The original implementation and the need for it are described in the JIRA FLUID-5212. This rarely-required facility covers the part of the framework's responsibilities that used to be covered by the now withdrawn demands blocks facility which are not covered by any other scheme. These mostly relate to situations where some form of multiple dispatch is required.

A component opts in to the grade linkage system by including the framework grade fluid.applyGradeLinkage. This grade may itself be supplied dynamically by any of the schemes listed earlier in this page. Once Whenever an instance of a component which has opted in starts to construct, the complete list of all of its grades, both static and dynamic, are checked against all grade linkage records which have been registered into the system holding the grade fluid.gradeLinkageRecord. Each of these linkage records will have the grades that they list in the field contextGrades checked against the component's total set of grades - if every one of them appears in the component, then all of the grades mentioned in the record's resultGrades entry will be added into the constructing component's set of grades. The dynamic grade resolution process will then kick off again until no further grades arrive.

The following example demonstrates the process from end to end:

Code Block
// Sets up a component which opts into the grade linkage system and has a parent grade of "examples.componentOne"
fluid.defaults("examples.gradeLinkageComponent", {
    gradeNames: ["examples.componentOne", "fluid.applyGradeLinkage", "autoInit"],
// Sets up a "grade linkage record" that states that any opted-in component which comes to 
// have both "examples.componentOne" AND "examples.componentTwo" as grades through any route,
// will automatically be also given grade "examples.componentOneAndTwo"
fluid.defaults("examples.oneTwoLinkage", {
    gradeNames: ["fluid.gradeLinkageRecord", "autoInit"],
    contextGrades: ["examples.componentOne", "examples.componentTwo"],
    resultGrades: "examples.componentOneAndTwo"
// Construct an instance of our component supplying an additional dynamic grade of "examples.componentTwo" - 
// this will activate the grade linkage system and automatically supply the further grade of "examples.componentOneAndTwo"
var that = examples.gradeLinkageComponent({
    gradeNames: "examples.componentTwo"
fluid.hasGrade(that.options, "examples.componentOneAndTwo"); // true    

Once the implementation for this feature has bedded down, the framework grade fluid.applyGradeLinkage will be removed and all components will be opted-in by default.