淘汰赛可排序绑定顺序

2023-12-09

这是一个问题的后续:KnockoutJS 可按字段对 observableArray 进行排序并进行条件排序

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

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

请看下面这个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/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

淘汰赛可排序绑定顺序 的相关文章

  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接?

    是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • JQuery 验证在 IE8 中不起作用

    我使用 JQuery 验证脚本来验证 HTML 表单 这在 Firefox 中完美运行 但在 IE8 中不起作用 我认为冒号 或分号 有问题 但我无法抓住它 jQuery validator addMethod selectNone fun
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

随机推荐

  • 从 PowerShell 的列表中选择一个项目

    我正在使用 PowerShell 进行 api 调用 我得到 3 个输出作为调用结果 ID 1 Name Abc Location London 我想将 ID 传递给一个新变量 我怎样才能在powershell中实现这一点 谢谢 您可以使用
  • 使用 SwiftUI ForEach 从 NSOrderedSet 获取字符串值

    Using 这个问题 答案我可以使用 ForEach 来使用从 CoreData 中的一对多关系创建的 NSOrderedSet 但是我似乎无法访问存储在 Core Data 实体中的字符串属性 我有两个 CoreData 实体 客户端和会
  • Swift 中根据属性删除数组对象

    我有一个像这样的自定义数组 我想删除学生 ID 为 4 的元素 var strNames Student id 1 name ghj Student id 4 name def Student id 9 name bkl 以经典的方式 我确
  • JSON 数据 - 已解析或“评估”

    从安全角度来看 我认为简单地对传入的 JSON 数据进行 评估 是一个严重错误 如果你得到像下面这样的数据 你就会遇到一些问题 someData function alert i m in ur code hackin ur page 我想
  • 多次具有相同键的红黑树:将集合存储在节点中还是将它们存储为多个节点?

    显然你可以做任何一个 但前者更常见 您为什么选择后者 它是如何运作的 我读到了这个 http www drdobbs com cpp stls red black trees 184410531 这让我觉得他们做到了 它说 insert a
  • R 将每日数据与刻度数据合并

    感谢您指向 na locf Darren 更新的示例和结果如下 我有报价数据 我已将其汇总到每日数据中 以便计算每日波动性 现在我已经创建了每日波动率 我想再次将每日数据与报价数据合并 但是 我怀疑由于每日数据和分时数据的索引差异 合并仍然
  • numpy读取带有复数的.csv

    堆栈溢出 我有一个包含复数的矩阵 例如 2 2982235934153075E 11 2 1179547211742553E 9i 我需要将其导入到numpy数组中 我一直在使用genfromtext file 解析我所有其他的真实值 但我
  • 发生了错误。请联系您的系统管理员。 (6632) Jasper 服务器 6.2 中出现错误

    我正在使用 Jasper 报告 TIBCO Jaspersoft Studio 6 2 0 final Jasper 服务器 JasperReports Server 社区版 v6 2 0 我将报告书模板 Jasper 报告发布到 Jasp
  • 将 CURL 转换为 URLRequest

    我正在尝试将 Swagger 给我的以下卷曲请求转换为 URLRequest curl X GET header Accept application json header Authorization key ttn account v2
  • 从系统帐户为用户创建 ServiceAccountCredential

    我使用以下代码通过系统登录 域范围内的身份验证 代表用户进行操作 我发现实现此目的的唯一示例使用反射来设置用户 我知道这不是完成此任务的正确方法 所以我想知道是否有人可以帮助我举一个如何解决此问题的示例 ServiceAccountCred
  • 如何在 Python 中的类之间创建共享类属性

    我昨天问过这个问题 但我把我的问题写得太糟糕了 当我意识到我输入的内容时 所有回复都是针对我没有的另一个措辞错误的问题的解决方案 抱歉上次的愚蠢输入 我有两个类 我希望它们能够共享一个公共列表 而不必将其作为参数传递 我还想创建一个方法来打
  • 在 Angular.js 中的控制器之间共享资源

    简单的问题 我有这个资源 var Company resource company id id id 我想在不同的控制器之间共享 现在 我正在复制粘贴内容 但我仍然没有达到我想要添加更多代码并使用的程度角度共享服务 还有其他选择吗 只需放入
  • 在 Python 中获取从周日开始的周数时出现问题?

    我正在使用 Python 3 6 并且在获取从周日开始的周数时遇到问题 如何在 Python 中找到从周日开始的周数 t1 datetime datetime now t1 strftime U 例如 关于09 16 2018 Sunday
  • 如何在 React 中使用 Materialize CSS 的 sideNav?

    我正在使用 React 开发一个应用程序 我想使用 sidenav 组件http materializecss com side nav html 问题是我收到此错误 Sidebar js 8 Uncaught TypeError WEBP
  • python 中的符号“=”和“==”是什么意思?

    什么时候应该使用符号 什么时候只使用符号 就足够了 python 中的符号 是什么意思 两周前我开始了 python 编码 这两个符号有时让我感到困惑 有几次当我使用 时 我会收到一条错误消息 我将其更改为 后 不再有错误消息 看来当 起作
  • 安装 Window Azure 存储包时出现问题

    我在安装 Azure 存储时遇到以下问题 通过 Nuget 打包 Attempting to resolve dependency Microsoft Data OData 5 6 2 Attempting to resolve depen
  • 高度:100% VS 最小高度:100%

    我用这个css设置一个 div 至最大高度 谁能给我一个一般性的答案 两者有什么区别height 100 and min height 100 这是 W3C 的解释 link The following algorithm describe
  • 使用扭矩稳定气垫船刚体直立

    我目前正在创建一款涉及悬停自行车的游戏 当自行车与物体碰撞时 它的角度会自然改变 我希望创建某种方法让它趋于 0 这是我尝试过的 if hoverbike rotation x 0 hoverbike rotation z 0 hoverb
  • Pandas-在保留列/索引值的同时向 DataFrame 添加缺失的日期?

    我有一个 pandas 数据框 其中包含日期 客户 商品以及购买的美元价值 date customer product amt 1 1 2017 tim apple 3 1 1 2017 jim melon 2 1 1 2017 tom a
  • 淘汰赛可排序绑定顺序

    这是一个问题的后续 KnockoutJS 可按字段对 observableArray 进行排序并进行条件排序 我还有两件事正在努力实现 首先 当嵌套列表项被拖动到另一个列表时 父级为空 我想删除父级 我通过创建一个 afterMove 函数