| Div |
|---|
class | | Wiki Markup |
|---|
{div:class=tutorial-linear-nav | }
{span:class =tutorial-nav-left }*Previous:* [Model Components| Span |
|---|
| class | Components]{span} {span:class=tutorial-nav-centre}[Up to
overview| Span |
|---|
class | overview|Tutorial - Getting started with Infusion]{span} {span:class=tutorial-nav-right}*Next:* [View Components]{span}
{div}
|---|
| Div |
|---|
|
| Panel |
|---|
| borderColor | #ccc |
|---|
| bgColor | #fff |
|---|
| title | On This Page |
|---|
| borderStyle | solid |
|---|
| |
|
| Div |
|---|
|
| Panel |
|---|
| borderColor | #ccc |
|---|
| bgColor | #fff |
|---|
| title | See Also |
|---|
| borderStyle | solid |
|---|
|
Component Grades
Infusion Event System| 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} |
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 | =tutorial-linear-nav | }
{span:class =tutorial-nav-left }*Previous:* [Model Components| Span |
|---|
| class | Components]{span} {span:class=tutorial-nav-centre}[Up to
overview| Span |
|---|
class | overview|Tutorial - Getting started with Infusion]{span} {span:class=tutorial-nav-right}*Next:* [View Components]{span}
{div}
|---|