knockout.js - Isotope 和 Knockout js 无法删除动态添加的元素

Question

我一直试图让 Isotopejs 和 Knockoutjs 一起工作。所以，到目前为止，它一直在流畅地工作，除非我需要向 dom 添加元素然后需要删除它们。

我已将问题追溯到此方法内部:
ko.utils.setDomNodeChildrenFromArrayMapping = function (domNode, array, mapping, options, callbackAfterAddingNodes) { .. }

哪个在调用这个方法
fixUpVirtualElements(lastMappingResult[lastMappingResultIndex].domNodes);

fixUpVirtualElements 方法正在删除我需要在 beforeRemove 事件中使用同位素删除的 dom 节点； foreach 绑定(bind)调用未获取需要删除的元素。

我已经阅读了 knockout 中该方法的注释。但我不明白它们的含义，因为我没有任何领域知识来了解它所谈论的内容。

任何人都可以看看我最新的 jsfiddle，让我知道为什么 fixUpVirutalElements 正在删除我需要传递给 beforeRemove 事件的元素。

http://jsfiddle.net/evanlarsen/C5y6G/

有人可以修复这个 jsFiddle 以使 2 个库一起工作。

谢谢，
埃文·拉森

Answer 1

我不是同位素专家；我知道它的作用，但我不知道它的算法，但是我对 knockout.js 的来源有深入的了解。现在可能的问题是同位素操纵了由 knockout 模板绑定(bind)创建的dom节点。 knockout.js 不允许其他程序接触由模板创建的 DOM 节点。所有的 knockout.js 算法都假定更改模板创建的 dom 节点的唯一方法是操作绑定(bind)到模板的数组。如果有其他东西直接操纵该节点，无论是通过添加节点、删除节点还是(如在同位素的情况下)重新排序它们......所有 knockout js 算法都会发疯......这意味着删除的节点不会消失，一些节点是重复的...等等。

- - - - - - - - - - - - 更新 - - - - - - - -

解决了
只需替换:

self.serviceAdded = function(el) {
        if (el && el.nodeType === 1) {
           $('#container').isotope('insert', $(el)); 

        }
    };

和:

self.serviceAdded = function(el) {
        if (el && el.nodeType === 1) {
           $('#container').isotope('appended', $(el)); 

        }
    };