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

Question

我可以获取使用以下 JS Bin 代码移动的 UI 元素，但不能获取 JS 对象。

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]) 的元素关联的 View 模型。 .

为了获取移动元素的索引，您只需调用 jQuery 的 .index()作用于移动的项目。

我在这里更新了您的示例，以演示如何根据您的情况结合使用两者: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();
        }
      });
  }
};