删除克隆元素上的knockout js绑定

我正在使用knockout js模板绑定function将一组项目呈现给一个元素：

 ko.applyBindings(new function () { this.childItems = [{ Text: "Test", ImageUrl: "Images/Image.png" }]; });   
  
  
  

单击时，将克隆子项并将其放入另一个元素中：

 $(".childSelector").on("click", ".childItem", function () { var clone = $(this).clone()[0]; ko.cleanNode(clone); $(".targetNode").append(clone); }); 

问题是当源数据更改并且模板重新绑定到新数据时，会引发以下错误：

未捕获错误：无法解析绑定。 消息：ReferenceError：未定义文本; 绑定值：attr：{title：Text}

我找到了另一个post，建议使用ko.cleanNode(element)删除knockout的绑定，但是这并没有解决我的问题。

有没有办法在克隆元素上删除knockout的绑定以防止重新绑定时出现此错误？ 如果不是，我只是通过从被点击的元素中提取所需的数据来“手动”克隆元素。

这是我正在做的一个简单的例子

Answer 1

您可以通过遍历DOM并删除data-bind属性和knockout注释来从元素中删除所有knockout绑定。

使用removeDataBindings(clone); 但首先用ko.cleanNode(clone)清理节点以清除任何事件处理程序。

 var commentNodesHaveTextProperty = document.createComment("test").text === ""; var startCommentRegex = commentNodesHaveTextProperty ? /^$/ : /^\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*$/; var endCommentRegex = commentNodesHaveTextProperty ? /^$/ : /^\s*\/ko\s*$/; function isStartComment(node) { return (node.nodeType == 8) && (commentNodesHaveTextProperty ? node.text : node.nodeValue).match(startCommentRegex); } function isEndComment(node) { return (node.nodeType == 8) && (commentNodesHaveTextProperty ? node.text : node.nodeValue).match(endCommentRegex); } function traverseNode(node, func) { func(node); node = node.firstChild; while (node) { traverseNode(node, func); node = node.nextSibling; } } function removeDataBindings(element) { var koComments = []; traverseNode(element, function (node) { if (isStartComment(node) || isEndComment(node)) { koComments.push(node); return; } //remove the 'data-bind' attributes if (node.nodeType === 1) { //ELEMENT_NODE node.removeAttribute('data-bind'); } }); //remove Knockout binding comments for (i = 0; i < koComments.length; i++) { node = koComments[i]; if (node.parentNode) { node.parentNode.removeChild(node); } } } 

Answer 2

Oliver，使用jQuery克隆绑定到这样的淘汰元素并不是一个好主意。 您应该为targetNode使用数据绑定。 如果你还没有这样做，最好通过Knockout Tutorials来深入了解基本用法。

如果你试图保留一个项目列表，使用一个克隆按钮，这里是一个死的简单小提琴，只使用Knockout这样做。 如果您正在尝试做其他事情，请告诉我; 你的问题并不完全清楚你的目标。

HTML：

 
  Clone  

JS：

 var ViewModel = function(data) { var self = this; self.items = ko.observableArray(data); self.clone = function(item) { //The ko.toJS here is a handy copy tool for viewModels //It isn't necessary for simple arrays like this one //But I included it because for an array of objects, you will want to use it self.items.push(ko.toJS(item)); }; };