ko.cleanNodeはjQuery .on（ "focusout"）イベントを削除します

Question

私はKnockout JSアプリケーションを使用しています。ここで私はko.cleanNode（ノード）を使用すると、フォーカスアウトクライアントイベントを削除するときに問題があります。すなわち、cleanNodeメソッドを呼び出す前に、focusOutはテキストボックス上で正しく動作します。その後、focusOutイベントはトリガーされません。私はスタックのオーバーフローの質問の多くをチェックして、私はこの除去の原因を見つけただけで、代替ソリューションではありません。ここに私のコードがあります。

$("#btn").click(function() { 
 
    viewModel = { 
 
    nValue: ko.observable(10) 
 
    } 
 
    ko.cleanNode(document.getElementById("txt")); 
 
    ko.applyBindings(viewModel, document.getElementById("txt")); 
 
}); 
 
ko.applyBindings({ 
 
    nValue: ko.observable(100) 
 
}); 
 
$("#txt").on("focusout", function() { 
 
    alert("focusOut"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<input type="text" id="txt" data-bind="value: nValue" /> 
 
<input type="button" id="btn" value="cleannode" />

Answer 1

disposal logic上のノックアウトのドキュメントから：

要素を削除すると、ノックアウトは、要素に関連付けられたすべてのデータをクリーンアップするためのロジックを実行します。このロジックの一部として、ノックアウトは、jQueryがページ内にロードされている場合、jQueryのcleanDataメソッドを呼び出します。。高度なシナリオでは、アプリケーションでこのデータがどのように削除されるのを防ぐか、カスタマイズすることができます。 Knockoutは、カスタムロジックをサポートするためにオーバーライドできる関数ko.utils.domNodeDisposal.cleanExternalData(node)を公開しています。

ko.utils.domNodeDisposal.cleanExternalData = function() { 
 
    // Do nothing. Now any jQuery data associated with elements will 
 
    // not be cleaned up when the elements are removed from the DOM. 
 
}; 
 

 
$("#btn").click(function() { 
 
    viewModel = { 
 
    nValue: ko.observable(10) 
 
    } 
 
    ko.cleanNode(document.getElementById("txt")); 
 
    ko.applyBindings(viewModel, document.getElementById("txt")); 
 
}); 
 

 
ko.applyBindings({ 
 
    nValue: ko.observable(100) 
 
}); 
 

 
$("#txt").on("focusout", function() { 
 
    alert("focusOut"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<input type="text" id="txt" data-bind="value: nValue" /> 
 
<input type="button" id="btn" value="cleannode" />

：たとえば、呼び出されてからcleanDataを防ぐために、空の機能は、ドキュメントに記載さ cleanExternalDataをオーバーライドし、だから、標準 cleanExternalData実装

を置き換えるために使用することができ

---

あなたのコードを見ると、あなたの意図がビューモデルを更新するだけの場合はobservableをクリックしてfocusOutイベントハンドラを追加する場合は、cleanNodeまたはapplyBindings()を使用する必要はなく、まったくjqueryを使用する必要はありません。

var viewModel = function() { 
 
    var self = this; 
 

 
    self.nValue = ko.observable(100); 
 

 
    self.increment = function() { 
 
    self.nValue(self.nValue() + 1); 
 
    } 
 

 
    self.focusOut = function() { 
 
    alert("Focus Out"); 
 
    } 
 
}; 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<input type="text" id="txt" data-bind="value: nValue, event: { focusout: focusOut }" /> 
 
<input type="button" id="btn" value="increment" data-bind="click: increment" />