jQuery排序后获取底层对象答案

【问题标题】：Getting underlying object after jquery sortjQuery排序后获取底层对象
【发布时间】：2013-05-25 05:20:08
【问题描述】：

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

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 对象列表和新位置？

【问题讨论】：

你想获取新移动的item的位置吗？
您究竟想念什么并试图访问？被移动的元素的绑定？
对于类似的功能，您可能需要查看：github.com/rniemeyer/knockout-sortable
@GotDibbs 我试图在移动项目时保存每个人的位置。为此，我需要每个 Person 对象及其新位置。示例的 Person 对象只有姓名和年龄（为简单起见），但我的对象有许多用于保存它的属性（id、parent 等）。
@RPNiemeyer 问题是我不能使敲除排序保持列表中的最后一项固定。见：stackoverflow.com/questions/15734263/…

标签： javascript jquery-ui knockout.js

【解决方案1】：

正如您在 cmets 中所指出的，您希望在每个 Person 移动后将其位置保存在 sortable 中。为此，您需要访问附加到正在移动的 DOM 元素的模型。 Knockout 提供了一个实用函数来访问与名为ko.dataFor([elem]) 的元素关联的视图模型。

为了获得被移动元素的索引，你只需要在被移动的项目上调用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();
        }
      });
  }
};

【讨论】：