| Wiki Markup |
|---|
{div:class=| Div |
|---|
| }
{ |
| :=}** [ ]{span} {span:class=}[ overview|Tutorial - Getting started with Infusion]{span} {span:class=}** [ Components]{span}
{div} |
| Wiki Markup |
|---|
{div:class=floatRight}
{panel:title= On This Page| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div} |
| Wiki Markup |
|---|
| {div:class=floatRight}
{panel:title= See Also| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
[Component Grades]
[Infusion13:Infusion Event System]
{panel}
{div} |
| Div |
|---|
|
| Panel |
|---|
| borderColor | #ccc |
|---|
| bgColor | #fff |
|---|
| title | On This Page |
|---|
| borderStyle | solid |
|---|
| |
|
Many times, you will be creating a component that works in an environment where other things are operating, and it will probably need to notify those other things of key events in its lifecycle. Events can be used to trigger changes in the visual appearance of a component, or actions by other components. For example:
...
| Code Block |
|---|
|
fluid.defaults("tutorials.currencyConverter", {
gradeNames: ["fluid.modelComponent", "fluid.eventedComponent", "autoInit"],
model: {
rates: {
euro: 0.712,
yen: 81.841,
yuan: 6.609,
usd: 1.02,
rupee: 45.789
},
currentSelection: "euro",
amount: 0,
convertedAmount: 0
},
events: {
conversionUpdated: null
},
finalInitFunction: "tutorials.currencyConverter.finalInit"
});
tutorials.currencyConverter.finalInit = function (that) {
// Add methods to the component object
that.updateCurrency = function (newCurrency) {
that.applier.requestChange("currentSelection", newCurrency);
};
that.updateRate = function (currency, newRate) {
that.applier.requestChange("rates." + currency, newRate);
};
that.convert = function (amount) {
var convertedAmount = amount * that.model.rates[that.model.currentSelection];
that.applier.requestChange("convertedAmount", convertedAmount);
return amount;
};
that.applier.modelChanged.addListener("convertedAmount", function (model, oldModel, changeRequest) {
that.events.conversionUpdated.fire(model.convertedAmount);
});
};
|
| Wiki Markup |
|---|
{div:class=| Div |
|---|
| }
{ |
| :=}** [ ]{span} {span:class=}[ overview|Tutorial - Getting started with Infusion]{span} {span:class=}** [ ]{span}
{div} |