如何检测项目在可观察阵列之间的移动

How to detect moving of an item between knockout observable arrays

本文关键字：观察 阵列 之间 移动 项目 何检测 检测      更新时间：2023-09-26

我正在使用查询和敲除构建一个web abb。在某个页面上，我有几个项目列表。这些列表是可排序和连接的，所以就JQuery而言，一切都正常。我用Ryan Niemeyer的例子为可排序列表创建了一个自定义绑定，以更新我的视图模型的可观察数组。

这一切都很好，但我想将更改保存到后端服务器。使用对可观察阵列的订阅，我可以检测到一个项目被从阵列中删除并添加到阵列中，但这会导致对后端服务器的两次更新调用。

如果在其中一个调用过程中出现问题，那么后端将处于无效状态。

如何检测项目的删除和随后添加同一项目，以便web应用程序可以对后端服务器进行一次性调用？

我认为处理这一问题的一个好方法是向sortableList绑定添加一个回调选项，该选项将项、原始父项和新父项作为参数传递。

以下是我在KO 2.0中使用的回调绑定：

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function(element, valueAccessor, allBindingsAccessor, data, context) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        //attach the appropriate class to our element
        if (ko.bindingHandlers.sortableList.autoAddClass) {
             ko.utils.toggleDomNodeCssClass(element, ko.bindingHandlers.sortableList.defaultClass, true);   
        }
        $(element).data("sortList", options.list || valueAccessor()); //attach meta-data
        $(element).sortable({
            update: function(event, ui) {
                var item = ui.item.data("sortItem");
                if (item) {
                    //identify parents
                    var originalParent = ui.item.data("parentList");
                    var newParent = ui.item.parent().data("sortList");
                    //figure out its new position
                    var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                    if (position >= 0) {
                        originalParent.remove(item);
                        newParent.splice(position, 0, item);
                    }
                    ui.item.remove();
                    if (options.afterDrop) {
                       options.afterDrop.call(this, item, newParent, originalParent);   
                    }
                }
            },
            connectWith: '.' + ko.bindingHandlers.sortableList.defaultClass
        });
        return ko.bindingHandlers.template.init.apply(this, arguments);
    },
    update: function(element, valueAccessor, allBindingsAccessor, data, context) {
       var options = ko.utils.unwrapObservable(valueAccessor()),
           newOptions = {}; 
        //build our options to pass to the template engine
        if (options.list) {
            newOptions.foreach = options.list;
            newOptions.name = options.tmpl;
            newOptions.includeDestroyed = options.includeDestroyed;
            newOptions.afterAdd = options.afterAdd;
            newOptions.beforeRemove = options.beforeRemove; 
        } else {
           newOptions.foreach = valueAccessor();
        }
        //use an afterRender function to add meta-data
        if (options.afterRender) {
            //wrap the existing function, if it was passed
            newOptions.afterRender = function(element, data) {
               ko.bindingHandlers.sortableList.afterRender.call(data, element, data);
               options.afterRender.call(data, element, data); 
            }  
        } else {
            newOptions.afterRender = ko.bindingHandlers.sortableList.afterRender;
        }
        //call the actual template binding
        ko.bindingHandlers.template.update(element, function() { return newOptions; }, allBindingsAccessor, data, context);  
    },
    afterRender: function(elements, data) {
        ko.utils.arrayForEach(elements, function(element) {
            if (element.nodeType === 1) {
                $(element).data("sortItem", data);
                $(element).data("parentList", $(element).parent().data("sortList"));
            } 
        });
    },
    defaultClass: 'container',
    autoAddClass: true
};

然后，您可以指定绑定，如：

<ul data-bind="sortableList: { tmpl: 'myItems', list: myObservableArray, afterDrop: myCallback }"></ul>

现在，您可以添加自己的回调，以告诉服务器项目已被移动。observableArray是函数（它是对象），所以您实际上可以为它们分配属性。下面是一个示例，我为每个可观察数组分配了一个id属性，然后在回调中访问它，这样我就可以用一种友好的方式来知道哪个是旧的父数组，哪个是新的父数组：

http://jsfiddle.net/rniemeyer/QZscP/

相关文章：