Observable array with jQuery sortable and KO templating not working in IE8

[jim.ma...@gmail.com]

Hi,

I have struggled quite some time with this before I found a working solution. The problem exists only in older IE browsers like IE8, you can replicate it in IE9-10 in compability mode.
If you look at my fiddles below you can see that I have a simple observableArray that is used to render LI in a UL. 

Then I use jQuery sortable on the UL to enable drag and drop sorting of the list, and in the sortable update method moves the item in the observable array.

Fiddle 1 works good in all browsers I have tested without using a template like in fiddle 1, but I need templates...

In fiddle 2 it doesn't work in <IE8. Binding like this: 

<ul class="sortable" data-bind="template: {name: 'Item', foreach: items}">

In fiddle 3 it works in all browsers. Binding the template like this instead:

<ul class="sortable" data-bind="foreach: items">
<!-- ko template: {name: 'Item', data: $data} -->
<!-- /ko -->
</ul>

1. Working without template:

http://jsfiddle.net/d4jBs/

2. Not working with template:

http://jsfiddle.net/wujac/

3. Working with template:

http://jsfiddle.net/ZpKyj/

Note! The problem only exists when the item is dragged using jQuery sortable. If you press the "Move last item first" (moved in array using splice) all of the fiddles work in IE8.

Can anyone tell me if I'm doing something wrong in fiddle 2.

I see no drawbacks by using templates like in fiddle 3, but still interested hearing what you think.

Best Regards,

Jim 

[rpn]

Hi Jim-

I am not sure exactly what problem that you are seeing (looks like nodes disappear or are sorted incorrectly), but I believe that I have run into the same issue with the sortable plugin (https://github.com/rniemeyer/knockout-sortable).  

The sortable functionality seems to have problems with the extra text nodes.  It seems to behave better when you strip the top-level text nodes from your template: http://jsfiddle.net/wujac/1/.   Otherwise, here it is with the plugin: http://jsfiddle.net/rniemeyer/KPLRB/

Hope this helps.

[Jim Malmborg]

Hi Ryan,

Thank you!

You are right! Removing the top-level text nodes solves the IE8 issue.

In my example fiddles the sorting where not working perfectly I know, but what I wanted to show was that in IE8 when the item was dragged to new position you would see JavaScript error in ko code, and the number after the name for e.g. Gamma2 should change to Gamma1 when dragged in between Alpha0, Beta1. And I added a button to show that moving an item in the array without using jQuery sortable works in IE8.

Only problem now is that it looks bad having no line-break after the scripts tag for the template and Visual Studio auto format (Ctrl + k + d) restores the line-break, but I can probably solve that with some setting in Visual Studio.

I didn't know about the sortable knockout plugin, I will definitely have a look at that. Do you know if it supports nested sortables?

Thanks,

Jim

[rpn]

Hey Jim-

Yes, you can do nested sortables.  If you try out the plugin and have any issues, let me know and I would be happy to help you out.

Thanks0

Ryan

[Jim Malmborg]

Hi,

Can you tell me what I'm doing wrong? http://jsfiddle.net/7y3ub/

Thanks,

Jim

[rpn]

Hi Jim-

Sorry, I missed this message.  In your fiddle, the resource was linked to the github page HTML page rather than the raw file.  Here is an updated fiddle: http://jsfiddle.net/rniemeyer/7y3ub/1/

Thanks-

Ryan