Next: Evented Components
Many components manage an internal model. For example:
The Infusion Framework provides supports for model-bearing components. When you declare a component to be a model component, the Framework will automatically construct a ChangeApplier, which wraps the model with special functions that can be used to query and modify the model. The ChangeApplier helps to protect the model from conflicting asynchronous changes in an environment where multiple components may be working with the same model. It also allows you to add checks that can prevent changes to the model if necessary (e.g validation).
More advanced information about the ChangeApplier is available through the links in the "See Also" sidebar.
To use a model with your component, you need to use the modelComponent grade. To do this:
modelproperty in your defaults containing your component's model.
fluid.copy() function. The content of your model will be entirely dictated by the needs of your application.
The Framework will attach both your model and its ChangeApplier to the component object as top-level properties. Your methods can read the model directly, using
that.model.*, but the ChangeApplier should be used to make any changes to the model, using
As an example, let's consider a component that need to record, for whatever reason, a date. Your
model will include a
Suppose you want the
date initialized to the current date at the time the component is instantiated, and you want this to happen before other component initialization happens. The IoC System provides a "hook" into the beginning of the component creation lifecycle: the
preInitFunction. You can provide a function that sets up anything required for component creation, inclucing initializing the model (if necessary) or creating any event handler functions that may be used later.
To initialize the
date portion of the model, we can create a
preInitFunction as follows:
The currency converter example we presented on the previous page might be more helpful if it supported more than one conversion rate. We can use a model to hold the available rates and to keep track of the currently-selected rate. We define this model in the component's defaults: