我正在寻找淘汰赛中的解除绑定功能。不幸的是，谷歌搜索和浏览这里提出的问题并没有给我任何关于该主题的有用信息。
我将提供一个示例来说明需要什么样的功能。
假设我有一个包含多个输入的表单。 我也有一个绑定到这个表单的视图模型。 出于某种原因，作为对用户操作的反应，我需要从表单中取消绑定我的视图模型，即由于操作完成，我希望我的所有可观察对象停止对相应值的更改做出反应，反之亦然 - 对可观察对象所做的任何更改都应该' t 影响输入值。
实现这一目标的最佳方法是什么？
【问题讨论】：
标签： forms mvvm knockout.js unbind
您可以使用ko.cleanNode 删除绑定。您可以将其应用于特定的 DOM 元素或更高级别的 DOM 容器（例如，整个表单）。
有关示例，请参阅 http://jsfiddle.net/KRyXR/157/。
【讨论】：
cleanNode() 确实（至少从 2.2.1 开始）擦除其事件处理程序的该节点等。当我有一个 ko-bound 引导模式时，对我来说是个坏消息，例如。更多信息：github.com/knockout/knockout/issues/1130
@Mark Robinson 的答案是正确的。
尽管如此，我使用 Mark answer 做了以下操作，您可能会觉得这很有用。
// get the DOM element
var element = $('div.searchRestults')[0];
//call clean node, kind of unbind
ko.cleanNode(element);
//apply the binding again
ko.applyBindings(searchResultViewModel, element);
【讨论】：
enable 绑定的自动性。
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="knockout-2.2.1.js"></script>
<script type="text/javascript" src="knockout-2.2.1.debug.js"></script>
<script type="text/javascript" src="clickHandler.js"></script>
</head>
<body>
<div class="modelBody">
<div class = 'modelData'>
<span class="nameField" data-bind="text: name"></span>
<span class="idField" data-bind="text: id"></span>
<span class="lengthField" data-bind="text: length"></span>
</div>
<button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button>
<button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button>
<button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button>
</div>
</body>
</html>@Mark Robinson 给出了完美的解决方案，我在单个 dom 元素上遇到了类似的问题，并在这个单个 dom 元素上更新了不同的视图模型。
每个视图模型都有一个点击事件，当点击发生时，每个视图模型的每次点击方法都被调用，这导致在点击事件期间执行不必要的代码块。
在应用我的实际绑定之前，我遵循@Mark Robinson 的方法来清理节点，它确实运行良好。 谢谢罗宾。 我的示例代码是这样的。
function viewModel(name, id, length){
var self = this;
self.name = name;
self.id = id;
self.length = length;
}
viewModel.prototype = {
showModelData: function(data){
console.log('selected model is ' + data);
if(data=='model1'){
ko.cleanNode(button1[0]);
ko.applyBindings(viewModel1, button1[0]);
console.log(viewModel1);
}
else if(data=='model2'){
ko.cleanNode(button1[0]);
ko.applyBindings(viewModel3, button1[0]);
console.log(viewModel2);
}
else if(data=='model3'){
ko.cleanNode(button1[0]);
ko.applyBindings(viewModel3, button1[0]);
console.log(viewModel3);
}
}
}
$(document).ready(function(){
button1 = $(".modelBody");
viewModel1 = new viewModel('TextField', '111', 32);
viewModel2 = new viewModel('FloatField', '222', 64);
viewModel3 = new viewModel('LongIntField', '333', 108);
ko.applyBindings(viewModel1, button1[0]);
});
【讨论】：