使用流星 0.8+ 重新排序项目答案

【问题标题】：re-order items with meteor 0.8+使用流星 0.8+ 重新排序项目
【发布时间】：2014-05-14 14:40:53
【问题描述】：

我想用拖放操作做一个待办事项列表，比如https://github.com/meteor/meteor/tree/master/examples/unfinished/reorderable-list。

问题是我不知道如何正确处理排名。我尝试了上面的示例，它可以正常工作，直到构建的排名不再改变

所以我认为每次插入新任务或更改一项任务的排名时，最好重新排序我的待办事项列表。

首先在客户端尝试：

var dropRank=1 Tasks.find({rank:{$gt:dropRank-1}},{fields:{_id:1}}).forEach( 功能（任务）{ Tasks.update(task._id,{$inc:{rank:1}}) }) Tasks.insert({rank:dropRank})

大约 150 个任务后，在 rank 1 插入新任务并重新排序会变得很慢。

在服务器上第二次尝试（使用 Meteor.method 或使用 collection.hook）：

Tasks.update({rank:{$gt:dropRank-1}},{$inc:{rank:1}},{multi:true})

大约 150 个任务后，我看到客户端上的排名缓慢更新。

如果我尝试使用本地集合，它会在 400 个任务后变慢。

所以问题是：有没有合适的方法来建立一个等级，这样我就可以插入一个任务并显示它而不更新其他等级？

【问题讨论】：

标签： sorting drag-and-drop meteor meteor-blaze

【解决方案1】：

您是否测试过是什么让您放慢了速度：数据库的更新或页面的重写？我对您的应用程序进行了简单的复制，发现当有 400 个 div 写入浏览器页面时，更新确实需要一些时间，但是当我将数据上下文的输出限制为 50 行时，感觉真的很爽。

对于我正在进行的另一个项目，我发现在更新数据库时我必须非常小心地询问浏览器的多少。它进行了一些测试，对于那个项目，我发现 30 个 div 几乎是我一次想要更新的所有内容。

【讨论】：

实际上是渲染速度变慢了。数据更新很快。当我查看我的网络检查器时，它像圣诞树灯一样闪耀。 Meteor 不是简单地在 DOM 中的正确位置插入新任务，而是将数据从 div 滑动到 div。

【解决方案2】：

我放弃了寻找其他更新排名和渲染所有内容的方法。

我将数据分成两部分：

静态部分：使用#each 和reactive:false 在集合上构建第一个视图
反应部分：一个光标观察器，当不是用户自己做的时候，它会放置新任务、删除或移动 dom 中的任务。

我可以轻松地在 500-700 个其他任务之前插入新任务，我很满意。我尝试了 1000 个任务，但太多了。

【讨论】：