| Note |
|---|
This tutorial has not yet been updated to reflect post-1.4 Framework changes. |
| Div |
|---|
|
| Panel |
|---|
| borderColor | #ccc |
|---|
| bgColor | #fff |
|---|
| title | On This Page |
|---|
| borderStyle | solid |
|---|
| | Table of Contents |
|---|
| maxLevel | 5 |
|---|
| minLevel | 2 |
|---|
| maxLevel | 5 |
|---|
|
|
|
In the previous Tutorial - View Components currency converter example, you can notice two things:
...
A renderer component supports a model (just as model components and view components Tutorial - Model Components and Tutorial - View Components do). The model of a renderer component contains any data that is to be rendered by the component.
...
The mapping between the component tree and the template is specified using cutpoints Cutpoints: key/value pairs mapping the ID of the component in the tree to a selector for the element in the template. When you use the renderer component grade, the Framework automatically generates a list of cutpoints from the selectors specified in the component options.
...
| Code Block |
|---|
|
fluid.defaults("tutorials.currencyConverter", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
selectors: {
amount: ".tut-currencyConverter-amount",
currency: ".tut-currencyConverter-currency-selecter",
result: ".tut-currencyConverter-result"
},
model: {
rates: {
names: ["euro", "yen", "yuan", "usd", "rupee"],
values: ["0.712", "81.841", "6.609", "1.02", "45.789"]
},
currentSelection: "0.712",
amount: 0,
result: 0
},
events: {
conversionUpdated: null
}
});
|
...
| Code Block |
|---|
|
tutorials.currencyConverter.produceTree = function (that) {
return {
amount: "${amount}",
currency: {
optionnames: "${rates.names}",
optionlist: "${rates.values}",
selection: "${currentSelection}"
},
result: "${result}"
};
};
|
...
| Code Block |
|---|
|
fluid.defaults("tutorials.currencyConverter", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
selectors: {
amount: ".tut-currencyConverter-amount",
currency: ".tut-currencyConverter-currency-selecter",
result: ".tut-currencyConverter-result"
},
model: {
rates: {
names: ["euro", "yen", "yuan", "usd", "rupee"],
values: ["0.712", "81.841", "6.609", "1.02", "45.789"]
},
currentSelection: "0.712",
amount: 0,
result: 0
},
events: {
conversionUpdated: null
},
produceTree: "tutorials.currencyConverter.produceTree"
});
|
...
| Code Block |
|---|
|
var bindEventHanders = function (that) {
// When the model changes, update the resulting "converted" value
that.applier.modelChanged.addListener("amount", function () {
that.convert(that.model.amount);
});
that.applier.modelChanged.addListener("currentSelection", function () {
that.convert(that.model.amount);
});
that.applier.modelChanged.addListener("result", function () {
that.refreshView();
});
};
|
...
| Code Block |
|---|
|
fluid.defaults("tutorials.currencyConverter", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
selectors: {
amount: ".tut-currencyConverter-amount",
currency: ".tut-currencyConverter-currency-selecter",
result: ".tut-currencyConverter-result"
},
model: {
rates: {
names: ["euro", "yen", "yuan", "usd", "rupee"],
values: ["0.712", "81.841", "6.609", "1.02", "45.789"]
},
currentSelection: "0.712",
amount: 0,
result: 0
},
events: {
conversionUpdated: null
},
produceTree: "tutorials.currencyConverter.produceTree",
finalInitFunction: "tutorials.currencyConverter.finalInit",
renderOnInit: true
});
var bindEventHanders = function (that) {
// When the model changes, update the resulting "converted" value
that.applier.modelChanged.addListener("amount", function () {
that.convert(that.model.amount);
});
that.applier.modelChanged.addListener("currentSelection", function () {
that.convert(that.model.amount);
});
that.applier.modelChanged.addListener("result", function () {
that.refreshView();
});
};
tutorials.currencyConverter.produceTree = function (that) {
return {
amount: "${amount}",
currency: {
optionnames: "${rates.names}",
optionlist: "${rates.values}",
selection: "${currentSelection}"
},
result: "${result}"
};
};
tutorials.currencyConverter.finalInit = function (that) {
// Add a method to the component object
that.convert = function (amount) {
var convertedAmount = parseInt(amount) * that.model.currentSelection;
that.applier.requestChange("result", convertedAmount);
that.events.conversionUpdated.fire(convertedAmount);
};
bindEventHanders(that);
};
|