Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove bindings from node in knockout?

I've found that in theory ko.cleanNode() should remove bindings from node if called, but in this example it doesn't seem to work.

Javascript:

// View model
var vm = {
    name: ko.observable("John")
}

// Node to be added
var node = $("<div/>",{
    id: "testing",
    'data-bind' : "text: name()"
});

// First addition to body
$("body").append(node);

// Apply bindings
ko.applyBindings(vm,$("#testing")[0]);

// Remove
ko.cleanNode($("#testing")[0]);

$("#testing").remove();

$("body").append(node);

Result: You can see in jsFiddle , that node still has attached binding (event listener).

like image 625
skmasq Avatar asked Aug 13 '13 00:08

skmasq


People also ask

What is binding in knockout?

A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts. The root level of the hierarchy refers to the viewModel parameter you supplied to ko. applyBindings(viewModel) .

What are the types of binding supported by knockout JS?

Binding Values The binding value can be a single value, literal, a variable or can be a JavaScript expression.

Is knockout js a framework or library?

Knockout. js is an open source library (under the MIT License) that is pure JavaScript that works with any existing web framework and every mainstream browser. Further, Knockout. js is fully documented with a complete set of online tutorials.

What is knockout library?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.


1 Answers

Knockout is removing the knockout related bindings from the node, but when it does so, it does not reset the node to empty values. It just stops updating the node automatically from the viewmodel, vm.

http://jsfiddle.net/BrsmC/2/

Take out line 21 of the updated fiddle.

ko.cleanNode($("#testing")[0]);

You should see when you run it, the name is now 'imnotbinding'.

like image 137
Johnny Tops Avatar answered Oct 10 '22 12:10

Johnny Tops