Knockout.js在绑定显示和基础值之间断开连接

时间:2014-12-26 18:02:15

标签: knockout.js

我有以下标记:

fare: <input name="fare" type="text" data-bind="value: fare " />
cash <input name="cash_amt" type="text" data-bind="value: cash()" />
charge <input name="charge_amt" type="text" data-bind="value: charge()" />
coupon <input name="coupon_amt" type="text" data-bind="value: prepaid()" />

所有绑定变量都是可观察的,并且票价订阅会触发以下函数:

self.setPayment = function () {
if (self.payment_contract().terms == null) {
    self.cash(self.fare());
    self.charge(null);
    self.prepaid(null);
} else if (self.payment_contract().terms == 'charge') {
    self.cash(null);
    self.charge(self.fare());
    self.prepaid(null);
} else if (self.payment_contract().terms == 'prepaid') {
    self.cash(null);
    self.charge(null);
    self.prepaid(self.fare());
}

完整的上下文和代码:fiddle

假设页面加载了付费类型,所有内容都按预期加载(票价输入和费用输入均为全票价)。如果我向现金输入添加1.00美元,然后更改票价金额,我预计它会将现金输入重置为空,并使用票价金额填充费用输入。它实际上是使用新值填充收费箱,但不是将现金输入重置为空。在向输入添加值后记录self.cash()的值时,它将记录为null。绑定显示和基础值之间似乎存在脱节,为什么?

1 个答案:

答案 0 :(得分:2)

问题是您的数据绑定是value: cash()而不是value: cash。 (同上charge()prepaid()

大多数绑定都是只读的,因此括号基本上是可选的。 text: foo()text: foo具有相同的功能;但是对于需要可写的数据绑定,将它绑定到observable本身很重要,而不是调用observable的结果。

当你执行value: cash()时,绑定到值的东西基本上是:

ko.computed(function() {
    return cash();
}); 

输入被初始化为该函数的值;但是输入的更改不会写回cash observable,因为计算结果是只读的。