Knockout JS Add, remove, modify bindings

Source: Internet
Author: User

Knockuot JS seems to have only considered how to bind (Ko.applybindings ()), but did not consider how to remove the binding, when the DOM content modified, the need to re-bind time, found that there seems to be powerless.

First, the solution

Here's a way to rebind, using Ko.cleannode (<your DOM node>) and then re-binding with ko.applybindings ().

1. View Model

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");};/ /Change 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>

Second, the question

1, but it is said that there may be problems, one of the problems is that the DOM-related event binding is not possible to remove.

Here's a way for a foreign buddy to use:

<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 the bound event before unbinding, and then clears the cached binding configuration with some commonality.

But this method should only be valid for the event binding of jquery, and if the event is bound by another way, it may not be completely removed.

2, it is recommended to use if or with binding to control, using the form below to operate, the flexibility is certainly not as straightforward as the use of JavaScript easy to operate.

<!--ko If:editortype = = ' checkbox '-->\
...
<!--/ko-->\


Iii. Adding and removing bindings

Increasing the binding dynamically adds a DOM node and then binds the DOM node. Remove binding to remove the original binding of the DOM node and not allow the binding operation to take effect again.

1. Add Bindings

View Model:


VM Model:

<script type= "Text/javascript" >var ViewModel = function () {};var MyModel = new ViewModel ();//Add Binding function Add_bind ing () {   //viewmodel Add property   mymodel.des = Ko.observable ("This is a demo");      Add 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 Bindings

View Model:


Description: This example refers to an example of a brother on the web, whose thinking is clear, but the example provided does not really solve the problem of multiple bindings, and thank the brother.

Reference:

1 Clear/remove observable bindings in knockout.js?

2, Knockout dynamic Add, remove bindings

Knockout JS Add, remove, modify 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.