バインディングハンドラーのノックアウトで要素バインディングを追加/削除する

Question

こんにちは私はリストを作成し、それをスライスしてpagingnationを追加しました。 すべてがうまくいきますが、私は、ページングを無効にして通常のスクロールを使用できるようにしたいと考えています。

私のHTMLマークアップは、このatmのように見えます。

<div data-bind="event: { mousewheel: ScrolledPagingnation }"> 
</div>  

私はカスタムハンドラがジョブの正しいツールだと思っていますか？本当に..イベントを追加/削除任意の大成功を持っていたhavent

<div data-bind="toggleScroll: EnablePagingnation"> 
</div> 

EnablePagingnationはboolenをtoggelingだけで観測可能です。 要素のイベントオブジェクトの追加/削除を実装するにはどうすればよいですか？ 他の任意の適切なアプローチは大歓迎aswell ..です:)

ko.bindingHandlers.toggleScroll = { 
    update: function (element, valueAccessor, allBindings) { 

     var value = valueAccessor(); 

     if (ko.unwrap(value) === true) { 
      //Pseudo Code 
      element add "event: { mousewheel: ScrolledPagination }" 


     } else { 
       //Clean the Binding 
       ko.cleanNode(element); 
     } 
    } 
    }; 

Answer 1

cleanNodeを使用しないでください。これまで

あなたはbindingHandlerは必要ありません。イベントハンドラの式を使用するだけです。私は以下のスニペットでclickイベントを使用しました。

vm = { 
 
    active: ko.observable(false), 
 
    v: ko.observable(1), 
 
    addToV: function() { 
 
    vm.v(vm.v() + 1); 
 
    } 
 
}; 
 

 
ko.applyBindings(vm);

#area { 
 
    height: 10rem; 
 
    width: 10rem; 
 
    background-color: lightgreen; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div id="area" data-bind="event: {click: active() ? addToV : null}"></div> 
 
Activate: 
 
<input type="checkbox" data-bind="checked: active" /> 
 
<div data-bind="text: v"></div>