如何使用 jQuery 更新淘汰赛绑定？

Question

在下面的小提琴中：http://jsfiddle.net/3Lqsx/2088/

我已将第二个按钮绑定到反转计数器方向的功能。

如果我单击该按钮，则在单击第一个按钮一次之前，新绑定不会应用。它应该立即生效。

如何强制此新绑定立即生效？

代码：

var ClickCounterViewModel = function() {
this.numberOfClicks = ko.observable(0);

this.registerClick = function() {
    this.numberOfClicks(this.numberOfClicks() + 1);
};

this.changeClickBinding = function() {
     $('#clicker').attr('data-bind', 'click: function(){numberOfClicks(numberOfClicks() - 1)}');
};

this.resetClicks = function() {
    this.numberOfClicks(0);
};

this.hasClickedTooManyTimes = ko.computed(function() {
    return this.numberOfClicks() >= 3;
}, this);
};

ko.applyBindings(new ClickCounterViewModel());

Answer 1

一般来说，在调用applyBindings 之后尝试动态更改绑定并不是一个好主意。该函数是 Knockout 用来评估 data-bind 属性中的代码的函数。如果您之后更改它们，您将获得的行为没有定义（据我所知）。

此外，您将 jQuery 和 Knockout 混合用于 DOM 更新和事件处理，这可能会导致以后的代码混乱。 Knockout 可以为您处理这一切：

var ClickCounterViewModel = function() {
  this.numberOfClicks = ko.observable(0);
  this.clickDirection = ko.observable(1);

  this.registerClick = function() {
    this.numberOfClicks(this.numberOfClicks() + this.clickDirection());
  };

  this.changeClickBinding = function() {
    this.clickDirection(this.clickDirection() * -1)
  };

  this.resetClicks = function() {
    this.numberOfClicks(0);
  };

  this.hasClickedTooManyTimes = ko.computed(function() {
    return this.numberOfClicks() >= 3;
  }, this);
};

ko.applyBindings(new ClickCounterViewModel());

我添加了一个新的 observable，clickDirection，来控制计数器是递增还是递减。 changeClickBinding 函数现在只是翻转该数字。