knockout.js - 点击绑定的启用条件

Question

有没有办法为点击绑定指定启用条件？例如，如果我有以下内容：

<div data-bind="click: toggleDialog">Click Me</div>

如果发生指定的条件，我希望能够禁用单击，因此效果如下：

<div data-bind="click: toggleDialog, enableClick: myName() === 'John'">Click Me</div>

我在想也许自定义绑定可以解决这个问题，但不太确定如何去做。

Answer 1

您可以使用我为锚点所做的这种方法

http://jsfiddle.net/xCfQC/11/

(function() {
    //First make KO able to disable clicks on Anchors
    var orgClickInit = ko.bindingHandlers.click.init;
    ko.bindingHandlers.click.init = function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      if(element.tagName === "DIV" && allBindingsAccessor().enable != null) {
          var disabled = ko.computed({
              read: function() {
                  return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;                                     
              }, 
              disposeWhenNodeIsRemoved: element
          });
          ko.applyBindingsToNode(element, { css: { disabled: disabled}  });
          var handler = valueAccessor(); 
          valueAccessor = function() {
              return function() {
                  if(ko.utils.unwrapObservable(allBindingsAccessor().enable)) { 
                      handler.apply(this, arguments);   
                  }
              }
          };         
      } 
      orgClickInit.apply(this, arguments);
    };
})();

更多细节： https ://github.com/AndersMalmgren/Knockout.BindingConventions/wiki/Button-convention

Answer 2

它实际上比这些选项中的任何一个都简单得​​多。您不能使绑定有条件，但可以使触发的函数有条件。只需在绑定中使用条件：

<div data-bind="click: myName() === 'John' ? toggleDialog : function(){ /* Nothing Happens */}">Click Me</div>

那要么会被解雇，要么会是一个不做任何事情toggleDialog()的匿名者。function(){}

您甚至可以堆叠绑定属性以禁用按钮本身：

<div data-bind="
    disabled: myName() !== 'John',
    click: myName() === 'John' ? toggleDialog : function(){ /* Nothing Happens */}
">Click Me</div>

或者有另一个函数运行以响应未满足的条件：

<div data-bind="
    disabled: myName() !== 'John',
    click: myName() === 'John' ? toggleDialog : tellUserTheyAreWrong
">Click Me</div>

希望这可以帮助

Answer 3

我最近做了这个并将条件检查放入点击函数本身，所以除非满足条件，否则它不会做任何事情。然后，我还使用计算函数为元素提供 css 类，并根据元素是否会对点击做出反应来更改光标：

在我的视图模型中：

iconStyle = ko.computed(function () {
    var cssClass = 'DefaultClass';
     if (/*condition to check if click is valid*/) {
        cssClass = cssClass + ' Off';
     }

    return cssClass;
})

然后像这样绑定：

<div class="stepIcon" data-bind="click: clickFunction, css: iconStyle"></div>

Answer 4

凯尔，在阅读了你对 nemsev 的评论后，我相信你想禁用你的按钮，而不是你的对话框功能。

绑定...

<button data-bind="click: doAlert, enable: allowAlert">Open Dialog</button>
<div data-bind="click: doAlert">Click me for another call to trigger the dialog</div>
<button data-bind="click: toggleAllowAlert, text: allowButtonText"></button>

而且代码...

var viewModel = function(){
    var self = this;
    self.allowAlert = ko.observable(true);
    self.allowButtonText = ko.computed(function(){
        if(self.allowAlert()){ 
            return 'Turn off button'; 
        } else { 
            return 'Turn on button'; 
        }
    });
    self.toggleAllowAlert = function(){
        self.allowAlert(!self.allowAlert());
    };
    self.doAlert = function(){
        alert('The dialog has opened');
    };
}

ko.applyBindings(new viewModel());

http://jsfiddle.net/DQg5P/1/