动态更改knockout.js中单击绑定的处理程序

Question

我得到了以下绑定工作就像一个魅力：

<button class="flatButton buttonPin" data-bind="click:EnterPinMode">Add pin</button>

在我的viewmodel中，我像这样定义Handler：

self.EnterPinMode = function(data,event)
{
    //Doing several things here
    //....
}

现在，假设我想在第一次点击它之后更改该按钮的行为......我怎么能这样做？ 我已经很容易管理更改按钮文本：

self.EnterPinMode = function(data,event)
{
    //Doing several things here
    //....
    var curButton = $(event.target);
    curButton.text("Cancel");
}    

但是如何改变按钮行为呢？ 如果我通过jQuery设置了这个处理程序，这不会是一个问题，但是有没有办法“替换”该控件上的click绑定，以便现在它将调用ExitPinMode处理程序，例如。 我对这种可能性有一些疑问，因为淘汰赛仅适用于声明性绑定（至少没有插件......），但我认为值得一提。

请注意，我实际上需要一些3种切换方式，我只是为了示例而将其简化为“正常”切换。

Answer 1

也许最简单的解决方案之一是在开头添加一个像hasBeenClicked这样的布尔值设置为false，然后将其设置为true。

例：

  self.hasBeenClicked  = false;

  self.EnterPinMode = function(data,event)
  {
   if (!self.hasBeenClicked )
     {
      var curButton = $(event.target);
      curButton.text("Cancel");
      self.hasBeenClicked = true;
     }
   else
     {
       //behaviour an a second click
     }
  }    

希望能帮助到你 ！

Answer 2

我认为使用一个私有的视图模型的hasBeenClicked标志很好，可能是最好的解决方案。

如果你真的想换掉处理程序，那应该很容易，但是，有这样的事情：

function enterPinMode() {
    //Doing several things here
    //....
    var curButton = $(event.target);
    curButton.text("Cancel");

    //set click handler to a step 2 function
    self.pinAction = exitPinMode;
}
function exitPinMode() {
    //....
}

self.pinAction = enterPinMode;

Answer 3

你可以试试这个

var vm = function () {
    var self = this;
    var nextState = 'firstState';
    var states = {
       firstState: function () {
           nextState = 'secondState';
           //Do stuff
       },
       secondState: function () {
           nextState = 'thirdState';
           //Do stuff
       },
       thirdState: function () {
           nextState = 'firstState';
           //Do stuff
       }
   }

   self.EnterPinMode = function () {
       states[nextState].call();
   }
}

您首先要记住的关于MVVM的是您正在设计一个对象来表示您的视图。 如果您的视图具有不同的状态，那么让您的视图模型了解这些状态并知道在什么状态下该做什么并没有错。 坚持使用MVVM。 你不会失望的。