Question

I’ve been trying to get Isotopejs and Knockoutjs to work together. So, far Its been working swimmingly except for when I need to add elements to the dom and then need to remove them.

I’ve traced the problem down to inside this method:
ko.utils.setDomNodeChildrenFromArrayMapping = function (domNode, array, mapping, options, callbackAfterAddingNodes) { .. }

Which is calling this method
fixUpVirtualElements(lastMappingResult[lastMappingResultIndex].domNodes);

The fixUpVirtualElements method is removing the dom node that I need to remove w/ isotope in the beforeRemove event; The foreach binding calls is not getting the element that needs to be removed.

I’ve read the notes for that method in knockout.. but I dont understand what they mean because I dont have any domain knowledge for what its talking about.

Can anyone please take a look at my latest jsfiddle and let me know why fixUpVirutalElements is removing the element I need to be passed to the beforeRemove event.

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

Can someone please fix this jsFiddle to get the 2 librarys working together.

Thanks,
Evan Larsen

Answer 1

I am not an expert of isotope; I know just what it does but I have no knowledge of its algorithms, however I have an indeep knowledge of the sources of knockout.js. Now probably the problem is that isotope manipulate the dom nodes created by knockout template binding. knockout.js DO NOT ALLOW THAT OTHER PROGRAMS TOUCH THE DOM NODES CREATED BY TEMPLATES. All knockout.js algorithms assume that the only way dom nodes created by templates are changed is by manipulating the array bound to the template. If something else manipulate directly that nodes, either by adding nodes, removing nodes or (as in the case of isotope) reordering them..all knockout js algorithm go crazy…this means deleted nodes doesn’t disappear, some nodes are duplicated…and so on.

————————update—————-

SOLVED
just substitute:

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

        }
    };

with:

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

        }
    };