0

I have setup a jsFiddle Example where I'm using jsViews with JQuery sortable. If you don't change anything, remove works correctly; but if you change the order of the items in the table, then remove any item, it deletes more then one. How do I fix this? I assume there is a way to refresh the observer after the move is done.

$("#sortableQuestionArea").sortable({
  placeholder: "ui-state-highlight",
  handle: ".sort-handle",
  update: function(event, ui) {
    // refresh code here??
  }
});
Josh
  • 819
  • 1
  • 14
  • 30

1 Answers1

2

This is jQueryUI sortable - which does DOM manipulation when you drag and drop. But if you are using JsViews to create a data-driven UI then your UI needs to be data-driven - and to change the order you need to sort the data, not the UI.

UI cannot simultaneously be data-driven and manipulated by moving DOM elements around. Generally, mixing the two is either impossible or very fragile. This applies no matter what data-binding framework you use (JsViews, Knockout, or some other framework...).

Note that in your example, deleting and inserting items is using a data-driven approach - and is not directly adding or removing DOM elements. This is the correct pattern to use for data-driven UI...

BorisMoore
  • 8,444
  • 1
  • 16
  • 27
  • I would still like the user to be able to set the "order" of the items. How can this be accomplished? – Josh Apr 22 '14 at 16:51
  • I got it working by adding a drop-down with a order option (1,2,3,...) and it's generated by the index + 1 (so no more sortable). – Josh Apr 22 '14 at 22:17
  • OK good. Otherwise you can have buttons to move an item up or down, or write your own drag and drop handlers to determine the target. Then create your modified array: sortedArray, (with items moved up or down) and pass to $.observable(array).refresh(sortedArray). The UI will automatically update. See http://www.jsviews.com/#refresh – BorisMoore Apr 22 '14 at 22:45
  • I was able to get sortable to work with refresh... I will post a jsFiddle tomorrow, if you could check it over and let me know if there is anything I could cleanup, that would be great. Thanks again Boris! – Josh Apr 22 '14 at 23:56
  • Oh - if it is moving rather than a generic sort, you can do even better - use $.observable(...).move(...) - see http://www.jsviews.com/#move – BorisMoore Apr 23 '14 at 03:10
  • Having 2 issues, here is my updated code: http://jsfiddle.net/F9WF6/7/ 1: if you move an item "up" my move code works great, if you move an item "down" (more then 1 position) it will fail. 2: After the sort, if you remove an item from the list, the UI breaks and I get some extra numbers on the page (looks like it's the index printing in the TR). Any ideas? – Josh Apr 23 '14 at 16:55
  • I fixed one of the issues by just removing the {^{#index}} and changing it to just {{#index}} http://jsfiddle.net/F9WF6/8/ Now I just need to fix the move "down" bug.. – Josh Apr 23 '14 at 22:22
  • Okay, it looks like I have the correct index now when moving the items around, however, moving "down" is still not working with .move... even with the correct IDs – Josh Apr 23 '14 at 22:35
  • Quick update, so everything seems to be moving now, EXCEPT if you try to move element 0 anywhere.... http://jsfiddle.net/F9WF6/10/ – Josh Apr 23 '14 at 22:46
  • 1
    Ha! the helper I created was causing the issue, I have updated the working code here: http://jsfiddle.net/F9WF6/11/ – Josh Apr 24 '14 at 15:15
  • Thanks this works a treat. However I made a slight improvement by storing the original index in the sortable start event. This way you don't need to add the data-index attribute to the ui. – nfplee Jan 27 '15 at 11:38