Having a condition inside the sortable item template that can exclude the item creates error

[Mark-Robinson]

See http://jsfiddle.net/unklefolk/VQndj/ based on the simple example.

The condition:

ko if: $data.Name !== 'Fix car'

.. causes a certain item to be excluded. However, this causes an error:

Uncaught TypeError: Cannot read property '__ko__1332343640095' of null

This is because in afterRender, element.parentNode is null.

    afterRender: function (elements, data) {
        ko.utils.arrayForEach(elements, function (element) {
            if (element.nodeType === 1) {
                ko.utils.domData.set(element, itemKey, data);
                ko.utils.domData.set(element, parentKey, ko.utils.domData.get(element.parentNode, listKey));
            }
        });
    },

The following seems to fix the error but not sure if this is the correct fix:

    afterRender: function (elements, data) {
        ko.utils.arrayForEach(elements, function (element) {
            if (element.nodeType === 1 && element.parentNode) {
                ko.utils.domData.set(element, itemKey, data);
                ko.utils.domData.set(element, parentKey, ko.utils.domData.get(element.parentNode, listKey));
            }
        });
    },

[rniemeyer]

@Mark-Robinson - thanks for reporting this one. I am going to explore fixes for it. Looks like a tricky one, as the if binding removes the original element from the DOM to use as a template. The meta-data gets attached to this element (which no longer has a parent) and has already been used as a template for the actual content. Looks to be a bit of a challenge to get the meta-data set before the "if" binding does its thing.

To be safe for now, you might want to either wrap each item in an element (put your "if" on a div and make sure that when there is no content, it does not mess up your display) or use "visible" instead of "if".

[rniemeyer]

I don't see a good way to fix this one at this time. I will keep it in mind, if the situation changes.