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 BindingsView 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