Versions Compared

Key

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

...

The Infusion IoC system provides a mechanism for declaratively creating describing the public properties of a component. While Members are typically used to store data values , they can also be used to expose functions. However, this is generally reserved for special cases like the DOM Binder- in rare cases they may also hold functions, although these are best described using Invokers which allow for polymorphism. Often static values (which are expected to remain fixed over the component's lifetime) are stored and sourced from the components options directly, however it is good practice to make use of the members block if the values will be mutable or should be exposed at the top level. Mutable values which are expected to be observed or shared amongst multiple components should instead be stored in the component's model.

Declaring Members

Members can be assigned via literal values, IoC references, or the result of an expander.

...

The following example defines a component of type xyz.widget, with three members named min, multiplier, and initialValue and initialValue. min is given a literal value of 0, multiplier sources it's its value through an IoC reference pointing at to a value in the components options, and initialValue is given the result of the a value via an expander. The original and multiply invokers access these properties directly off of from the the component "{that}"

Code Block
fluid.defaults("xyz.widget", {
    ...
    members: {
        min: 0,
        multiplier: "{that}.options.multiplier"
        initialValue: {
            expander: {
                funcName: "xyz.widget.getInitialValue",
                args: ["{that}.dom.input"]
            }
        },
        ...
    }
    multiplier: 2,
	invokers: {
        original: {
			funcName: "fluid.identity",
            args: ["{that}.initialValue"]
        },
        multiply: {
			funcName: "xyz.widget.product",
            args: ["{arguments}.0", "{that}.multiplier", "{that}.min"]
        }
    } 
    ...
}); 
 
xyz.widget.getInitialValue = function (input) {
    return input.val();
};
 
xyz.widget.product = function (value, multiplier, min) {
    return Math.max(min, value * multiplier);
};