The Knockout code below applies tracks the values of the two textboxes using an observable and a computed observable.
Markup:
GBP:
<input type="textbox" data-bind="value: sendGbp" />
<br />
Exchange Rate: £1 GBP
<br />
<input type="textbox" data-bind="value: sendFx" />
Javascript:
var transferItem = {
receiveCurrencyCode : "JPY",
exchangeRate : 123.223122
}
function viewModel(item) {
var self = this;
var initval = parseFloat(100).toFixed(2);
self.sendGbp = ko.observable(initval);
/** commented out error source
self.labelFxRate = ko.computed(function() {
return exchangeRate + " " + item.receiveCurrencyCode;
});
**/
self.sendFx = ko.computed({
read: function () {
return parseFloat(self.sendGbp() * item.exchangeRate).toFixed(2);
},
write: function (val) {
var valGbp = parseFloat(val);
self.sendGbp((valGbp / item.exchangeRate).toFixed(2));
}
});
}
ko.applyBindings(new viewModel(transferItem));
This works fine until I want to add another computed observable to display the
This involves going commenting out the section in the viewModel code and adding this a databound label to the markup:
Exchange Rate: £1 GBP = <label data-bind="text: labelFxRate" />
But this causes an error and the markup fails to render completely
What's the correct way of applying the second computed variable to show additional properties from the transferItem object?
A full work in progress version is on jsfiddle: http://jsfiddle.net/WuvZD/3/
It seems like you must not use self-closing tags for label. Also in your commented out code you used return exchangeRate but it should be return item.exchangeRate?
Updated fiddle: http://jsfiddle.net/WuvZD/4/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments