首页 > 代码库 > Knockout JS 增加、去除、修改绑定

Knockout JS 增加、去除、修改绑定

2024-10-08 15:08:39   215人阅读

Knockuot js 似乎只考虑过怎么绑定（ko.applyBindings（）），却没考虑过怎么去除绑定，当修改了DOM内容，需要重新绑定时，发现似乎无能为力。

一、解决办法

这里有一个重新绑定的方法，就是使用ko.cleanNode(<YOUR DOM NODE>)，然后再使用ko.applyBindings()重新绑定就可以了。

1、VIEW模型

 

[html] view plain copy
 
 print?
  1. <h3>3、更改绑定</h3>  
  2. <div id="divSample3">  
  3.     你叫啥?<span id=‘span3‘ data-bind=‘text: name‘></span><br/>  
  4.     <a href=http://www.mamicode.com/"javascript:void(0)" onclick="updateBingding()">我问的是别名!</a>  
  5. </div>  

2、VIEW-MODEL

[javascript] view plain copy
 
 print?
  1. <script type="text/javascript">  
  2.     var viewModel = function () {     
  3.        this.name = ko.observable("张三");  
  4.        this.aliasName = ko.observable("三儿");  
  5.     };  
  6.       
  7.     //var myModel = new viewModel();  
  8.     ko.applyBindings(new viewModel(),document.getElementById(‘divSample3‘));  
  9.       
  10.       
  11.     var viewModel2 = function () {    
  12.        this.name = ko.observable("张三");  
  13.        this.aliasName = ko.observable("三儿");  
  14.     };  
  15.       
  16.       
  17.     //更改绑定  
  18.     function updateBingding(){  
  19.        //$("#span3").attr("data-bind", "text: aliasName");  //使用jQuery  
  20.        var span3 = document.getElementById(‘span3‘); //不使用jQuery  
  21.        span3.setAttribute("data-bind", "text:aliasName");  
  22.        ko.cleanNode(span3);  
  23.        ko.applyBindings( new viewModel2(), span3);  
  24.     }  
  25. </script>  

 

二、问题

1、但是据说这样可能存在问题，问题之一是与DOM相关的事件绑定是没法去除的。

这里提供一个外国哥们使用的方法：

 

[javascript] view plain copy
 
 print?
  1. <script lang="javascript">  
  2. ko.unapplyBindings = function ($node, remove) {  
  3.     // unbind events  
  4.     $node.find("*").each(function(){  
  5.         $(this).unbind();  
  6.     });  
  7.   
  8.     // Remove KO subscriptions and references  
  9.     if(remove) {  
  10.         ko.removeNode($node[0]);  
  11.     } else {  
  12.         ko.cleanNode($node[0]);  
  13.     }  
  14. };  
  15. </script>  

这个方法使用jQuery方法在取消绑定前，去除绑定的事件，然后再清除缓存的绑定配置，同时具有一定的通用性。

 

但这个方法应只对jQuery的事件绑定有效，如果使用其他方式绑定的事件，可能去除不彻底。

2、建议尽量使用if或with绑定来控制，使用下面的形式来操作，灵活性肯定不如直接使用JavaScript操作方便。

<!-- ko if: editortype == ‘checkbox‘ -->\
         ...
<!-- /ko -->\

 

三、增加和移除绑定

增加绑定即动态增加一个DOM节点，然后再绑定该DOM节点。移除绑定即将DOM节点原有的绑定给去除，不让绑定操作再生效。

1、增加绑定

VIEW模型：

 

[html] view plain copy
 
 print?
  1. <h3>1、动态添加绑定</h3>  
  2. <div id="divSample1">  
  3.     <a href=http://www.mamicode.com/"javascript:void(0)" onclick="add_Binding()">添加绑定</a>  
  4. </div>  


VM模型：

 

 

[html] view plain copy
 
 print?
  1. <script type="text/javascript">  
  2.     var viewModel = function () {     
  3.       
  4.     };  
  5.       
  6.     var myModel = new viewModel();  
  7.       
  8.     //添加绑定  
  9.     function add_Binding(){  
  10.        //viewModel添加属性  
  11.        myModel.des = ko.observable("this is a demo");  
  12.          
  13.        //添加绑定元素  
  14.        var html = "<span id=‘add_banding‘ data-bind=‘html: des‘></span>";  
  15.          
  16.        document.body.innerHTML = document.body.innerHTML + html;      
  17.        var add = document.getElementById("add_banding");  
  18.        ko.applyBindings(myModel, add);  
  19.     }  
  20. </script>  


2、去除绑定

 

VIEW模型：

 

[html] view plain copy
 
 print?
  1. <h3>2、移除绑定</h3>  
  2. <div id="divSample2">  
  3.     原始值：<span id=‘span1‘ data-bind=‘text: des‘></span><br/>  
  4.     对照值：<span id=‘span2‘ data-bind=‘text: des‘></span><br/>  
  5.     <a href=http://www.mamicode.com/"javascript:void(0)" onclick="changeModelValue()">改变model属性值</a>  
  6.     <a href=http://www.mamicode.com/"javascript:void(0)" onclick="removeBingding()">去除"对照值"的绑定</a>  
  7. </div>  


VM模型：

 

 

[html] view plain copy
 
 print?
  1. <script type="text/javascript">  
  2.     var viewModel = function () {     
  3.        this.des = ko.observable("this is a demo");  
  4.     };  
  5.       
  6.     var myModel = new viewModel();  
  7.     ko.applyBindings(myModel, document.getElementById("divSample2"));  
  8.       
  9.     //改变des值  
  10.     function changeModelValue(){  
  11.        myModel.des(new Date().valueOf());  
  12.     }  
  13.       
  14.     //移除绑定  
  15.     function removeBingding(){  
  16.        var span2 = document.getElementById("span2");  
  17.        alert(span2.getAttribute(‘data-bind‘));  
  18.        span2.setAttribute("data-bind", "");  
  19.        alert(span2.getAttribute(‘data-bind‘));  
  20.          
  21.        ko.cleanNode(span2);  
  22.        ko.applyBindings(myModel, span2);  
  23.     }  
  24. </script>  


说明：此例参照了网上一位兄弟的示例，其思路比较清晰，但其提供的示例并没有真正解决多次绑定的问题，向这位兄弟表示感谢。

 

参考：

1、How to clear/remove observable bindings in Knockout.js?

2、knockout动态添加、移除绑定

Knockout JS 增加、去除、修改绑定


联系
我们