Question

It seems knockout destroys bindings on detached elements. So if I apply a binding and detach that element, not only will that binding not be computed while the element is detached but it will still be broken after the element is re-inserted back into the document.

So something like:

ko.applyBindings(items, $list[0]);

items.push('one');

$list.detach();

items.push('two');

$container.append($list);

items.push('three');

Here’s a fiddle: http://jsfiddle.net/nicholasstephan/KejYc/2/

The binding in $list should read one, two three, but instead every update after the detach is not computed.

What should I be doing here to make this work?

Answer 1

Applying the bindings at the end makes your fiddle work. But I don’t imagine that’s what you are shooting for:

var $container = $("#container");
var $list = $('#list');
var items = ko.observableArray([]);

items.push('one');
$list.detach();
items.push('two');
$container.append($list);
items.push('three');
ko.applyBindings(items, $list[0]);

This SO thread suggests you just re-apply bindings after each detach or simply hide the elements instead of detaching them. There are also several comments suggesting that the approach be rethought in this case, which seems to be the best answer.

Perhaps you could provide the desired behavior rather than a contrived example? That would probably go a long ways to suggesting alternative models. Assuming your goal is to create draggable elements (Off the cuff, it’s the only really likely scenario where I’d need to detach/re-insert elements), you could take an approach like this:

1. drag initiated
2. drag a copy of the element (leave original in doc)
3. drag stopped
4. copy any necessary data from original to copy
5. insert the copied element at the new/valid location
6. delete the old element
7. call ko.applyBindings on the new element