Knockout JS Add, remove, modify bindings

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

[HTML]View PlainCopyprint?

2. <h3>3, change bindings </h3>
4. <div id="DivSample3">
6. What's your name? <span id= 'span3 ' data-bind=' text:name '></span> <br/>
8. <a href="javascript:void (0)" onclick="updatebingding ()"> I'm asking for an alias! </a>
10. </div>

2, View-model

[JavaScript]View PlainCopyprint?

2. <script type="Text/javascript" >
4. var ViewModel = function () {
6. this.name = ko.observable ("Zhang San");
8. this.aliasname = ko.observable ("three children");
10. };
14. //var MyModel = new ViewModel ();
16. Ko.applybindings (new ViewModel (), document.getElementById (' divSample3 '));
22. var ViewModel2 = function () {
24. this.name = ko.observable ("Zhang San");
26. this.aliasname = ko.observable ("three children");
28. };
34. //Change bindings
36. function updatebingding () {
38. //$ ("#span3"). attr ("Data-bind", "text:aliasname"); Using jquery
40. var span3 = document.getElementById (' span3 '); //Do not use jquery
42. Span3.setattribute ("Data-bind", "Text:aliasname");
44. Ko.cleannode (SPAN3);
46. Ko.applybindings ( new ViewModel2 (), SPAN3);
48. }
50. </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:

[JavaScript]View PlainCopyprint?

2. <script lang="JavaScript" >
4. Ko.unapplybindings = function ($node, remove) {
6. //Unbind Events
8. $node. Find ("*"). each (function () {
10. $ (this). Unbind ();
12. });
16. //Remove KO subscriptions and references
18. if (remove) {
20. Ko.removenode ($node [0]);
22. } Else {
24. Ko.cleannode ($node [0]);
26. }
28. };
30. </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:

[HTML]View PlainCopyprint?

2. <H3>1, dynamically add bindings </h3>
4. <div id="DivSample1">
6. <a href="javascript:void (0)" onclick="add_binding ()"> Add binding </a >
8. </div>

VM Model:

[HTML]View PlainCopyprint?

2. <script type="Text/javascript">
4. var viewModel = function () {
8. };
12. var mymodel = new ViewModel ();
16. Adding bindings
18. function add_binding () {
20. ViewModel Adding properties
22. mymodel.des = ko.observable ("This is a demo");
26. Adding binding elements
28. var html = "<span id= ' add_banding ' data-bind= ' html:des ' ></span>";
32. Document.body.innerHTML = Document.body.innerHTML + html;
34. var add = document.getElementById ("add_banding");
36. Ko.applybindings (MyModel, add);
38. }
40. </Script>

2. Remove Bindings

View Model:

[HTML]View PlainCopyprint?

2. <h3>2, remove bindings </h3>
4. <div id="DivSample2">
6.      original value: <span id= ' span1 '  data-bind= ' text: des ' ></span><br/>&NBSP;&NBSP;
8. Control Value:<span id= 'span2 ' data-bind=' text:des '></span>< br/>
10. <a href="javascript:void (0)" onclick="Changemodelvalue ()"> Change Model property value </a>
12. <a href="javascript:void (0)" onclick="removebingding ()"> Remove the binding of "control value" </ a>
14. </div>

VM Model:

[HTML]View PlainCopyprint?

2. <script type="Text/javascript">
4. var viewModel = function () {
6. this.des = ko.observable ("This is a demo");
8. };
12. var mymodel = new ViewModel ();
14. Ko.applybindings (MyModel, document.getElementById ("DivSample2"));
18. Change des value
20. function Changemodelvalue () {
22. Mymodel.des (New Date (). ValueOf ());
24. }
28. Remove bindings
30. function removebingding () {
32. var span2 = document.getElementById ("span2");
34. Alert (Span2.getattribute (' data-bind '));
36. Span2.setattribute ("Data-bind", "" ");
38. Alert (Span2.getattribute (' data-bind '));
42. Ko.cleannode (SPAN2);
44. Ko.applybindings (MyModel, span2);
46. }
48. </Script>

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