javascript - Knockout 可排序绑定(bind)顺序

标签 javascript jquery knockout.js jquery-ui-sortable

这是对一个问题的跟进:KnockoutJS Sortable group observableArray by field and conditionally sort

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

其次,也是最重要的一点,基础对象(任务)有一个顺序属性。我想将其绑定(bind)到可排序顺序,以便在将任务拖到“计划”列表周围时,更新顺序属性。如何从可排序回调中访问其他列表项的顺序?

请看下面这个Fiddle .

如有任何帮助,我们将不胜感激。

最佳答案

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

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

对于第二个问题,我非常喜欢使用一个扩展程序来自动跟踪 observableArray 中的顺序。它看起来像:

//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;
};

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

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/

关于javascript - Knockout 可排序绑定(bind)顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12836810/

相关文章:

javascript - 在 Typescript 中避免 AJAX Gets 多次回调的优雅方法?

javascript - 如何使用 Javascript 加载 XML 文件内容?

javascript - HTML5 拖放 : Prevent D&D between Browser and Browser-windows

javascript - 通过软件包安装程序安装时,Knockout 未定义

javascript - 页脚不粘在底部视口(viewport)

javascript - 如何替换 li 文本但保留其子元素?

javascript - css绑定(bind)中的自定义类名

javascript - 如何隐藏数据类型不是选择值的所有 div

javascript - 如何在 google maps JavaScript API v3 上隐藏或禁用 google Logo 、页脚、版权?

javascript - 将 jQuery 脚本存储在 JS 变量中