KnockoutJS - 点击事件后的数据绑定

Question

我想在点击事件后更新 First# 或 Second# 文本。当我从输入字段聚焦时，它现在更新了。

这里是a link。

function ViewModel () {
    self.this;
    self.var1 = ko.observable(50);
    self.var2 = ko.observable(60);
....
}
var vm = new ViewModel();
ko.applyBindings(vm);

Answer 1

使用 observables 的全部意义在于为您跟踪变化：例如，当更改输入时，文本会发生变化等。

如果您不希望这种自动跟踪，您需要使用一些临时变量来存储输入值并在点击事件中手动更改您的可观察值：

function ViewModel() {
   var self = this;
   self.var1 = ko.observable(50);
   self.var2 = ko.observable(60);
   self.temp1 = ko.observable(self.var1())
   self.temp2 = ko.observable(self.var2())

   this.addition = function() {
     self.var1(Number(self.temp1()));
     self.var2(Number(self.temp2()));

     this.var3 = self.var1() + self.var2();
     alert("Addition is = " + this.var3);
   };
 };

并将您的输入字段绑定到这些临时变量：

<p>First #: <span data-bind="text: var1"> </span></p>
<p>Sectond #: <span data-bind="text: var2"> </span></p>

<p>Enter first #:
  <input data-bind="value: temp1" />
</p>
<p>Enter second #:
  <input data-bind="value: temp2" />
</p>
<p>

<button type="submit" data-bind="click: addition">Click here for addition</button>
</p>

演示：JSFiddle.

KnockoutJS - 点击事件后的数据绑定

KnockoutJS - Data Binding After Click Event

knockout-2.0

knockout.js

knockout-mvc