How do you use jsviews with jquery sortable?

Question

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??
  }
});

Answer 1

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...