search

mikeric / rivets

Lightweight and powerful data binding.
http://rivetsjs.com
MIT License
3.23k stars 310 forks source link

Sortable rv-repeat inside of an rv-repeat #429

Open alanjames1987 opened 9 years ago

alanjames1987 commented 9 years ago

I've been looking for an answer for this for weeks and keep running into road blocks.

I have a project that has lists inside of lists (think tasks and subtasks). The nested sets of lists are sortable and connected to each other via jQuery-UI, so that the subtasks can be moved between tasks.

After the subtasks are moved I need to update the model to reflect the changes made in the DOM. This has not been simple.

Here is a JSFiddle showing example code of the problem.

http://jsfiddle.net/AlanJames1987/f6jc8t07/8/

Can anyone please help? I'm very willing to compensate someone if desired.

alanjames1987 commented 9 years ago

I somewhat found a solution.

Basically I'm getting the ids from jQuery-UI's sortable .toArray method and using those to update the model. To update the model I'm using multiple map and underscore find methods.

However, I am still getting an error.

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This is because removeChild throws an exception when the child is not found, because it has been moved by jQuery-UI sortable.

All removeChild call should probably be inside of a try catch. That seems to solve the problem.

mikeric commented 9 years ago

Basically I'm getting the ids from jQuery-UI's sortable .toArray method and using those to update the model. To update the model I'm using multiple map and underscore find methods.

@alanjames1987 Hmm, I don't see any binder defined for this in your fiddle. Could you paste what your sortable binder looks like?

You need to either write your sortable binder in a way that plays well with rv-each (which is a one-way only binder), or you can write a custom iteration binder that handles both sorting and iterating (will be a two-way binder in this case, and should be used instead of rv-each).

alanjames1987 commented 9 years ago

Here is another JSFiddle to the code I am using to resort the subtasks.

http://jsfiddle.net/AlanJames1987/f6jc8t07/10/

I don't get the error here but the subtasks disappear when they are sorted.