Question

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

我将提供一个示例来说明需要哪种功能。

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

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

Answer 1

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

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

Answer 2

@Mark Robinson的回答是正确的。

尽管如此，使用Mark回答我做了以下操作，您可能会觉得有用。

  // 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);

Answer 3

<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元素上更新不同的视图模型。

每个视图模型都有一个click事件，每次点击时都会发生每个视图模型的点击方法，这会导致在点击事件中执行不必要的代码块。

在应用我的实际绑定之前，我遵循@Mark Robinson方法来清理Node，它确实运行良好。谢谢罗宾。我的示例代码是这样的。

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

从击倒中的视图解除视图模型

3 个答案: