40

我正在寻找淘汰赛中的解除绑定功能。不幸的是，谷歌搜索和浏览这里提出的问题并没有给我任何关于该主题的有用信息。

我将提供一个示例来说明需要什么样的功能。

可以说我有一个包含多个输入的表单。我也有一个绑定到这个表单的视图模型。出于某种原因，作为对用户操作的反应，我需要从表单中取消绑定我的视图模型，即由于操作完成，我希望我的所有可观察对象停止对相应值的更改做出反应，反之亦然 - 对可观察对象所做的任何更改都应该' t 影响输入值。

实现这一目标的最佳方法是什么？

4

3 回答 3

49

您可以使用ko.cleanNode删除绑定。您可以将其应用于特定的 DOM 元素或更高级别的 DOM 容器（例如，整个表单）。

有关示例，请参见http://jsfiddle.net/KRyXR/157/ 。

于 2012-06-14T12:52:21.267 回答
15

@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);
于 2013-02-11T09:42:58.067 回答
1 

<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]);
	});

于 2016-10-20T06:07:01.170 回答