Add, remove, and modify bindings in Knockout JS.

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.