javascript - 第二个计算函数导致 Knockout 代码出错

Question

下面的 Knockout 代码应用了使用可观察值和计算可观察值跟踪两个文本框的值。

标记:

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));

这工作正常，直到我想添加另一个计算的可观察对象来显示

这涉及注释掉 viewModel 代码中的部分并将此数据绑定(bind)标签添加到标记中:

Exchange Rate: £1 GBP  = <label data-bind="text: labelFxRate" />

但这会导致错误并且标记无法完全呈现

应用第二个计算变量来显示 transferItem 对象的附加属性的正确方法是什么？

jsfiddle 上有一个完整的正在进行的版本:http://jsfiddle.net/WuvZD/3/

Answer 1

看来您不能对标签使用自闭合标签。 同样在您注释掉的代码中，您使用了 return exchangeRate 但它应该是 return item.exchangeRate?

更新 fiddle :http://jsfiddle.net/WuvZD/4/