Question

我一直试图让Isotopejs和Knockoutjs一起工作。所以，它一直在游泳，除非我需要在dom中添加元素然后需要删除它们。

我已将问题追溯到此方法内部： ko.utils.setDomNodeChildrenFromArrayMapping = function（domNode，array，mapping，options，callbackAfterAddingNodes）{..}

这是在调用此方法 fixUpVirtualElements（lastMappingResult [lastMappingResultIndex] .domNodes）;

fixUpVirtualElements方法正在删除我需要在beforeRemove事件中删除w /同位素的dom节点; foreach绑定调用没有获取需要删除的元素。

我已经在淘汰赛中阅读了该方法的注释..但我不明白它们的意思，因为我对它的讨论没有任何领域知识。

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

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

有人可以修复这个jsFiddle让2个图书馆一起工作。

谢谢，埃文拉森

Answer 1

我不是同位素专家;我知道它的作用但是我不知道它的算法，但我对knockout.js的来源有一些不确定的知识。现在可能的问题是同位素操纵由敲除模板绑定创建的dom节点。 knockout.js不允许其他程序触及模板创建的DOM节点。所有knockout.js算法都假设模板创建的dom节点改变的唯一方法是操纵绑定到模板的数组。如果其他东西直接操纵那个节点，无论是通过添加节点，删除节点还是（如同位素的情况下）重新排序它们。所有淘汰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)); 

        }
    };

Answer 2

我认为将Isotope和Knockout结合起来的最佳选择是通过对后者的绑定。为此，我写了一篇名为Knockout-Isotope的文章。请注意，它需要Knockout的分叉版本，但希望我所做的微小改动可以在某些时候集成回来。

当我刚刚完成Knockout-Isotope时，它并没有经过超级测试，但它至少处理了我抛出的场景。

代码

Demo fiddle

<强> HTML：

<h1>Knockout Isotope Binding Demo</h1>
<p>This is a demonstration of the 
 <a href="https://github.com/aknuds1/knockout-isotope">Knockout-Isotope</a>
 binding for <a href="http://knockoutjs.com/">Knockout</a>, which visualizes
 Knockout observableArrays through
 <a href="http://isotope.metafizzy.co/index.html">Isotope</a>.
</p>

<p>Click on an item to remove it or click in the item container to add a new item</p>
<div id="container" data-bind="isotope: { data: items, isotopeOptions: getOptions }, click: addItem">
  <div data-bind="text: text, click: $parent.removeItem, clickBubble: false"></div>
</div>

<强> JavaScript的：

function ItemModel(parent) {
    var value, self = this,
        found, i;
    for (value = 0; value < parent.items().length; ++value) {
        found = false;
        for (i in parent.items()) {
            var item = parent.items()[i];
            if (item.value() == value) {
                found = true;
                break;
            }
        }
        if (!found) {
            break;
        }
    }
    this.value = ko.observable(value);

    this.text = ko.computed(function () {
        return "Item " + self.value();
    });
}

var ViewModel = function () {
    var self = this;
    self.items = ko.observableArray();
    self.items.push(new ItemModel(self));
    self.items.push(new ItemModel(self));

    this.removeItem = function (item) {
        self.items.remove(item);
    };

    this.addItem = function () {
        self.items.push(new ItemModel(self));
    };

    // Knockout callback for getting Isotope options
    this.getOptions = function () {
        return {
            masonry: {
                columnWidth: 210
            }
        };
    };
};

ko.applyBindings(new ViewModel("Test"));

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

2 个答案:

代码