Knockout.js's cleanNode does not unbind events

Question

I have a modal popup with similar data and need the bindings cleared. The answer for the highest rating says to use knockout\'s clean node method

Here are (handwritten)

Answer 1

I don't think cleanNode is what you want. Generally speaking, you shouldn't need to be cleaning nodes and reapplying bindings unless you're doing something very out of the ordinary, which I don't think you are. You simply want to change the ViewModel that that particular section of the DOM is bound to, correct?

I'd simply make an observable that holds the ViewModel that the modal should be bound to, and then write your template based on that.

var ModalViewModel = function(v) {
   var self = this;
   self.Foo = ko.observable(v.Foo);
   self.Bar = ko.observable(v.Bar);
   self.Stuffs = ko.observableArray([]);
   self.AddStuffs = function() { ... }
}

var modalViewModel = new ModalViewModel({Foo : "Foo", Bar: "Bar" });

var viewModel = {
    modal: ko.observable(modalViewModel)
};

var myModal= document.getElementById("myModal");

ko.applyBindings(myViewModel, myModal);

Note that the viewModel that is actually bound to the modal never changes, but contains a sub-viewModel that does. The above logic should be executed exactly once, then to change or remove the modal, the viewModel.modal observable can be modified.

Then your template would look like

<div id="myModal" data-bind="with: modal">
<a href="#" data-bind="click:AddStuff">my link</a>
<table>
    <tbody data-bind="foreach:Stuffs ">
        <tr>
            <td><span data-bind="text:Interval"></span></td>
        </tr>
    </tbody>
</table>
</div>

(With the only change being the with: modal part, and the removal of an unnecessary $root)

Here's a minimalistic version that demonstrates this working: http://jsfiddle.net/260wypyk/