rniemeyer / knockout-sortable

A Knockout.js binding to connect observableArrays with jQuery UI sortable functionality
MIT License
547 stars 128 forks source link

DOM updates broken after sorting #91

Closed qoeb closed 10 years ago

qoeb commented 10 years ago

JSFiddle for testing: http://jsfiddle.net/zLQBJ/

Start dragging the first item (abc) below the second or third item, but do NOT drop it there. Instead, drag it back to its original position, drop it there. After that, clicking the remove abc button will remove the item from the list (the model) - verified by the div below the buttons - but the sortable list in the DOM is not properly updated. This list will only be updated correctly if the second item is removed (use the remove def button, removing the third item before that will also not remove the deleted item from the DOM).

Same happens if you drag any other item temporarily above or below another item, drop it back in its original position, and then delete the item. The DOM will only be updated properly if the item before or after the dropped item is deleted, depending on where you dragged the item.

rniemeyer commented 10 years ago

@qoeb - the only way to prevent that type of problem is to remove the text nodes around your template like: http://jsfiddle.net/rniemeyer/kRhvQ/ . For anonymous templates (just children of sortable binding element), this is done automatically. Maybe, I will have to revisit and see if there is a safe way to do this for named templates too, as I did not see a good way in the past without creating a separate template engine.

qoeb commented 10 years ago

I see. Maybe it should be mentioned in the documentation, I guess your named template example in the docs will have the same problem. But removing the text nodes around the element works, so feel free to close this issue if you want. And thanks for the fast reply.

rniemeyer commented 10 years ago

The latest version (0.9.0) adds some functionality to help strip leading/trailing whitespace from named templates.