CODEWITHSUNDEEP
sortingdrag-and-dropmeteormeteor-blaze
user3636214
user3636214

Reputation: 604

re-order items with meteor 0.8+

I want to do a todo list with drag'n'drop like https://github.com/meteor/meteor/tree/master/examples/unfinished/reorderable-list.

The problem is that I don't know how to handle the rank properly. I tried the example above, it works fine until the builded rank does not change any more

So I thought that it would be better to reorder my todo list each time I insert a new task or if I change the rank of one task.

First try on client:


    var dropRank=1  
    Tasks.find({rank:{$gt:dropRank-1}},{fields:{_id:1}}).forEach(
        function(task){
            Tasks.update(task._id,{$inc:{rank:1}})
    })  
    Tasks.insert({rank:dropRank})

After ~150 tasks, it becomes slow to insert a new task at rank 1 and to reorder the ranks.

2nd try on server (with a Meteor.method or with collection.hook):


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

After ~150 tasks, I see that the rank slowly updates on client.

If I try it with a local collection, it slow down after 400 tasks.

So the question is: is there a proper way to build a rank so that I can insert a task and display it without updating the other ranks?

Upvotes: 0

Views: 229

Answers (2)

user3636214
user3636214

Reputation: 604

I gave up about looking for an other way of updating the rank and render everything.

I splited the data in 2 parts:

  • the static part : to build the first view with #each and reactive:false on collection

  • the reactive part: a cursor observer that will place new tasks, delete or move the task in the dom when it wasn't the user himself who did it.

I could easily insert new tasks before 500-700 other tasks, I'm satisfied. I tried with 1000 tasks but it was too much.

Upvotes: 0

Jay Greenspan
Jay Greenspan

Reputation: 56

Have you tested what's slowing you down: the update of the database or the rewriting of the page? I did a simple replication of your application and found that the update did take some time to update when there were 400 divs writing to the browser page, but when I limited the output of the data context to 50 rows, it felt really snappy.

For another project I'm working on, I found that I had to be pretty careful about how much I asked of the browser when updating the database. It took some testing, and for that project I found that 30 divs was about all I wanted to update at a time.

Upvotes: 0

Related Questions