我正在寻找在淘汰赛解除绑定功能。 不幸的是谷歌搜索,并通过要求在这里没有给我的题目任何有用信息的问题寻找。
我将提供一个例子来说明需要什么样的功能。
可以说我有几个输入的形式。 另外我有绑定到这种形式的视图模型。 出于某种原因,如对用户操作,我需要拆散我的观点从表单模型,即由于操作完成后,我想我所有的观测停止对相应的值或相反的变化反应的反应 - 做观测不该任何变化”吨影响的输入值。
什么是实现这一目标的最佳途径?
我正在寻找在淘汰赛解除绑定功能。 不幸的是谷歌搜索,并通过要求在这里没有给我的题目任何有用信息的问题寻找。
我将提供一个例子来说明需要什么样的功能。
可以说我有几个输入的形式。 另外我有绑定到这种形式的视图模型。 出于某种原因,如对用户操作,我需要拆散我的观点从表单模型,即由于操作完成后,我想我所有的观测停止对相应的值或相反的变化反应的反应 - 做观测不该任何变化”吨影响的输入值。
什么是实现这一目标的最佳途径?
您可以使用ko.cleanNode
删除绑定。 你可以把这个特定的DOM元素或更高级别的DOM容器(例如整个表格)。
见http://jsfiddle.net/KRyXR/157/的一个例子。
@马克罗宾逊的答案是正确的。
然而,使用马克的回答我做了以下内容,这可能对你有用。
// 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);
<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>
@马克·罗宾逊给了完美的解决方案,我已经与单一的DOM元素,这单一的DOM元素的更新不同的视图模型类似的问题。
每个视图模式有一个点击事件,当点击发生每个视图模型获取调用哪个点击事件期间导致不必要的代码块执行的每次点击方法。
我跟着@马克罗宾逊的方法来清洁节点前申请我的实际绑定,果然效果很好。 感谢罗宾。 我的示例代码是这样的。
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]); });