javascript - jQuery排序后获取底层对象

Question

我可以获得使用以下 JS Bin 代码而不是 JS 对象移动的 UI 元素。

http://jsbin.com/edopuh/14/edit

ko.bindingHandlers.Sortable = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
      $(element).sortable({
        items: 'li:not(".notsortable")',
        update: function(event, ui){
           alert("you just moved " +  $(ui.item[0]).text());
        }
      });
    }
};

移动后，如何获取 Person 对象列表和新位置？

Answer 1

正如您在评论中指出的那样，您希望将每个人的位置在移动后保存在可排序中。为此，您需要访问附加到正在移动的 DOM 元素的模型。Knockout 提供了一个实用函数来访问与名为ko.dataFor([elem]).

为了获得被移动元素的索引，你只需要.index()在被移动的项目上调用 jQuery 的函数。

我在这里更新了您的示例，以演示如何根据您的情况同时使用这两者：http: //jsbin.com/edopuh/27/edit

ko.bindingHandlers.Sortable = {
  init: function (element, valueAccessor, allBindingsAccessor) {
      var options = ko.utils.unwrapObservable(valueAccessor() || {});
      $(element).sortable({
        items: 'li:not(".notsortable")',
        update: function(event, ui){
           var $item = $(ui.item[0]),
               person = ko.dataFor(ui.item[0]);

           alert("you just moved " +  $item.text());

           person.position = $item.index();
        }
      });
  }
};