| Section |
|---|
| Column |
|---|
| ChangeApplier APIThis section explains and documents the various Javascript API calls for instantiating and working with ChangeAppliers. In practice, users will use the ChangeAppliers which are automatically constructed for every Model Component as its top-level member applier and will not construct their own. Furthermore, a good deal of the use made of ChangeAppliers will take the form of Declarative Configuration rather than literal JavaScript API calls - many more declarative uses are supported in Infusion 1.5 and even more will be supported in Infusion 2.0. This page presents both programmatic calls and their declarative equivalents where they exist. |
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| borderStyle | solid |
|---|
| title | On This Page | borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | See Also | borderStyle | solid |
|---|
| |
|
|
...
Example of two styles of declarative model listener registration
Users can freely define very fine or coarse-grained listeners for changes in a model using the ChangeApplier. Here are some examples using the new declarative model listener registration syntax in Infusion 1.5:
| Code Block |
|---|
|
fluid.defaults("my.component", {
gradeNames: ["fluid.modelComponent", "fluid.eventedComponent", "autoInit"],
invokers: {
printChange: {
"this": "console",
method: "log",
args: ["{arguments}.0"]
}
},
model: {
cats: {
hugo: {
name: "Hugo",
colours: ["white", "brown spots"]
},
clovis: {
name: "THE CATTT!",
colours: ["white", "black spots", "black moustache"]
}
}
},
modelListeners: {
// Will fire individual change events whenever any part of "cats.hugo" changes.
// {change}.value will correspond to each changed path within "hugo".
"cats.hugo.*" {
funcName: "{that}.printChange",
args: [{change}.value]
},
// Will fire a single composite change event whenever any part of "cats.clovis" changes.
// {change}.value will contain the new state of the "clovis" object.
"cats.clovis": {
funcName: "{that}.printChange",
args: [{change}.value]
}
}
});
// Example usage.
var c = my.component();
c.applier.change("cats.hugo", {
name: "Hugonaut",
colours: ["hard to tell"]
});
> "Hugonaut"
> ["hard to tell"]
c.applier.change("cats.clovis.name", "THER CATTT!");
> {name: "THER CATTT!", colours: ["white", "black spots", "black moustache"]}
|
...