How to move element and not get Uncaught Error: You cannot apply bindings multiple times to the same element

Question

I have created a plunk that demonstrates my issue: http://plnkr.co/edit/OWHICW15s6W6QCjNi7NV

I have a table of Tasks and each Task can contain another list of Tasks. When you create or edit a new task, that work is done in a Bootstrap Modal. When the modal div is created, it is created right after the table that contains the list of Tasks. Because this could be nested inside of another modal, I have code that will move (append) the modal div to another div that is a child of the body element. If I don't do this any nested modal is restricted in size to the containing modal. This logic is in showModalBinding.js.

Even though this works and functions as I'd expect, when I move the modal element, I get a Uncaught Error: You cannot apply bindings multiple times to the same element.

How can I make this error go away, but still maintain the correct bindings? (I have tried cleanNode and that makes the error go away, but it also removes the binding. How can I re-add the binding?)

Answer 1

I would make sure that your bindings are only applied to a container, and not the whole document. That way when you move your div, you'll be moving it to an area that isn't bound by knockout.

ko.applyBindings(myViewModel,document.getElementById('main-content'));