7

クリック バインドの有効条件を指定する方法はありますか? たとえば、次のような場合:

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

特定の条件が発生した場合にクリックを無効にできるようにしたいので、次のような効果があります。

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

これにはカスタムバインディングが機能するのではないかと考えていますが、それを行う方法が正確にはわかりません。

4

4 に答える 4

12

アンカーに対して行ったこのアプローチを使用できます

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-conventions

于 2013-06-26T14:18:01.970 に答える
3

実際には、これらのオプションのどれよりもかなり単純です。バインディングを条件付きにすることはできませんが、起動される関数を条件付きにすることはできます。バインディングで条件を使用するだけです。

<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>

お役に立てれば

于 2014-11-28T18:27:59.567 に答える
0

私は最近これを行い、条件チェックをクリック関数自体に入れました。そのため、条件が満たされない限り何もしません。次に、計算関数を使用して要素の 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>
于 2013-06-26T13:45:33.027 に答える
0

カイル、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/

于 2013-06-26T13:51:20.113 に答える