删除克隆元素上的淘汰赛 js 绑定

我正在使用 knockout js 模板绑定功能将项目集合渲染到元素：

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

<script type="text/html" id="template">
    <div class="childItem" data-bind="attr: { title: Text }">
        <img data-bind="attr: { src: ImageUrl }" />
    </div>
</script> 

<div class="childSelector" data-bind="template: { name: 'template', foreach: childItems }">
</div>

单击时，子项目将被克隆并放置到另一个元素中：

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

问题是，当源数据发生变化，模板重新绑定新数据时，会抛出以下错误：

未捕获的错误：无法解析绑定。消息：参考错误： 文本未定义；绑定值：attr: { title: Text }

我发现另一篇文章建议使用ko.cleanNode(element)删除淘汰赛的绑定，但这并没有解决我的情况的问题。

有没有办法删除克隆元素上的淘汰赛绑定，以防止重新绑定时出现此错误？如果没有，我将通过从单击的元素中提取所需的数据来“手动”克隆该元素。

Here http://jsfiddle.net/QJu5u/这是我正在做的事情的一个简单例子

您可以通过遍历 DOM 并删除元素来删除元素中的所有剔除绑定data-bind属性和淘汰赛评论。

Use removeDataBindings(clone);但首先用以下命令清理节点ko.cleanNode(clone)清除所有事件处理程序。

var commentNodesHaveTextProperty = document.createComment("test").text === "<!--test-->";
var startCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*-->$/ : /^\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*$/;
var endCommentRegex =   commentNodesHaveTextProperty ? /^<!--\s*\/ko\s*-->$/ : /^\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);
        }
    }
}