Knockout Sortable 绑定顺序 [英] Knockout Sortable bind Order

问题描述

这是一个问题的后续:KnockoutJS Sortable按字段对 observableArray 进行分组并有条件地排序

我正在努力实现另外两件事.首先，当嵌套列表项被拖到另一个列表时，父项为空，我想删除父项.我通过创建 afterMove 函数并检查 sourceParent 长度是否为 0 来完成此操作.然后我查看路由以查看是否有空任务数组并相应地删除.我想知道这是否是一个有效的解决方案.我还必须删除任务，否则在删除计划任务时任务订阅会添加重复项.

There are two further things I am battling to achieve. First when a nested list item is dragged to another list leaving the parent empty I would like to remove the parent. I have done this by creating an afterMove function and checking if the sourceParent length is 0. Then I look through the routes to see if any have an empty tasks array and remove accordingly. I would like to know if this is an efficient solution. I also have to remove the tasks otherwise the tasks subscription adds duplicates when removing scheduled tasks.

第二个也是最重要的基础对象(Task)有一个 order 属性.我想将它绑定到可排序的顺序，以便在任务被拖动到 Scheduled 列表时更新 order 属性.如何从可排序回调中访问其他列表项的顺序?

Second and most importantly the base object (Task) has an order property. I would like to bind this to the sortable order so that when the tasks are dragged around the Scheduled list the order property is updated. How do I access the order of other list items from the sortable callback?

请参阅以下内容Fiddle.

如有任何帮助，我们将不胜感激.

Any assistance would be greatly appreciated.

推荐答案

对于第一个问题，有一个稍微优化的方法可以做到.arg.sourceParent 包含在您要删除的 tasksByRoute 项中.remove 函数可以使用一个函数来针对项目运行.所以，你可以这样写:

For the first issue, there is a slightly optimized way that you could do it. arg.sourceParent is contained in the tasksByRoute item that you want to remove. The remove function can take a function to run against the items. So, you could write it like:

self.afterMoveCallback = function(arg) {
    if (arg.sourceParent().length === 0) {
        self.tasksByRoute.remove(function(route) {
           return route.tasks === arg.sourceParent; 
        });
    }
};

对于第二个问题，我真的很喜欢使用一个扩展来自动跟踪 observableArray 中的顺序.它看起来像:

For the second issue, I really like to use an extension that will automatically track the order in an observableArray. It would look something like:

//track an index on items in an observableArray
ko.observableArray.fn.indexed = function(prop) {
    prop = prop || 'index';
   //whenever the array changes, make one loop to update the index on each
   this.subscribe(function(newValue) {
       if (newValue) {
           var item;
           for (var i = 0, j = newValue.length; i < j; i++) {
               item = newValue[i];
               if (!ko.isObservable(item[prop])) {
                  item[prop] = ko.observable();
               }
               item[prop](i);  //add 1 here if you don't want it to be zero based
           }
       }   
   }); 

   //initialize the index
   this.valueHasMutated(); 
   return this;
};

在你的情况下，你会像这样使用它:

in your case, you would use it like:

self.scheduledTasks = ko.observableArray([
    new Task(8, 4, "Route 4", "Cust 8", 1),
    new Task(9, 4, "Route 4", "Cust 9", 2),
    new Task(10, 5, "Route 5", "Cust 10")
    ]).indexed("order");

以下是更新了这两项更改的示例:http://jsfiddle.net/rniemeyer/usVKQ/

Here is a sample updated with both of these changes: http://jsfiddle.net/rniemeyer/usVKQ/

这篇关于Knockout Sortable 绑定顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！