...
Example: Currency Converter
Component grades can be combined, if necessary. Suppose we wish to add events to the model-bearing currency converter shown on the previous page. We can declare the component to be both a model component and an evented component:
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); }); }; |
...