Add, remove, and modify bindings in Knockout JS.

Add, remove, and modify bindings in Knockout JS.

Knockuot JS seems to have only considered how to bind (ko. applyBindings (), but has not considered how to remove the binding. When the DOM content is modified and needs to be re-bound, it seems powerless.

I. Solution

Here is a rebinding method, that is, use ko. cleanNode (<your dom node>) and then use ko. applyBindings () to rebind it.

1. VIEW Model

<H3> 3. Change binding 2. VIEW-MOLDE


<Script type = "text/javascript"> var viewModel = function () {this. name = ko. observable ("Zhang San"); this. aliasName = ko. observable ("three children") ;}; // var myModel = new viewModel (); ko. applyBindings (new viewModel (), document. getElementById ('divsample3'); var viewModel2 = function () {this. name = ko. observable ("Zhang San"); this. aliasName = ko. observable ("three children") ;}; // modify the binding function updateBingding () {/$ ("# span3 "). attr ("data-bind", "text: aliasName"); // use jQuery var span3 = document. getElementById ('span3'); // do not use jQuery span3.setAttribute ("data-bind", "text: aliasName"); ko. cleanNode (span3); ko. applyBindings (new viewModel2 (), span3) ;}</script>

Ii. Problems

1. But it is said that there may be problems. One of the problems is that binding to DOM-related events cannot be removed.
Here is a method used by a foreign Buddy:

<script lang="javascript">ko.unapplyBindings = function ($node, remove) {    // unbind events    $node.find("*").each(function(){        $(this).unbind();    });    // Remove KO subscriptions and references    if(remove) {        ko.removeNode($node[0]);    } else {        ko.cleanNode($node[0]);    }};</script>
This method uses the jQuery method to remove binding events before unbinding, and then clear the cache binding configuration. It also has a certain degree of universality.

However, this method should only be valid for jQuery event binding. If events bound using other methods are used, they may not be completely removed.
2. We recommend that you use if or with binding as much as possible and use the following method for operations. The flexibility is certainly not as convenient as using Javascript directly.

<! -- Ko if: editortype = 'checkbox' --> \
...
<! --/Ko --> \



3. add and remove bindings
Adding a DOM node dynamically adds a DOM node, and then binds the DOM node. Remove binding removes the existing binding of the DOM node, so that the binding operation does not take effect again.
1. Add binding
VIEW model:


<H3> 1. dynamically add binding 

VM model:




<Script type = "text/javascript"> var viewModel = function () {}; var myModel = new viewModel (); // Add and bind function add_Binding () {// Add the property myModel to viewModel. des = ko. observable ("this is a demo"); // add the binding element var html = "<span id = 'add _ banding 'data-bind = 'html: des '> </span> "; document. body. innerHTML = document. body. innerHTML + html; var add = document. getElementById ("add_banding"); ko. applyBindings (myModel, add) ;}</script>

2. Remove binding

VIEW model:

<H3> 2. Remove binding 

VM model:




<Script type = "text/javascript"> var viewModel = function () {this. des = ko. observable ("this is a demo") ;}; var myModel = new viewModel (); ko. applyBindings (myModel, document. getElementById ("divSample2"); // change the des value function changeModelValue () {myModel. des (new Date (). valueOf ();} // remove the bound function removeBingding () {var span2 = document. getElementById ("span2"); alert (span2.getAttribute ('data-bind'); span2.setAttribute ("data-bind ",""); alert (span2.getAttribute ('data-bind'); ko. cleanNode (span2); ko. applyBindings (myModel, span2) ;}</script>

Note: This example refers to the example of a brother on the Internet. The idea is clear, but the example provided does not actually solve the problem of multiple bindings. I would like to express my gratitude to this brother.

Refer:
1. How to clear/remove observable bindings in Knockout. js?
2. dynamically add and remove knockout bindings