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。你不会失望的。

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

3 个答案: