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

标签：javascript   knockout   

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

一、解决办法

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

1、VIEW模型

<h3>3、更改绑定</h3>
<div id="divSample3">
	你叫啥?<span id='span3' data-bind='text: name'></span><br/>
	<a href="javascript:void(0)" onclick="updateBingding()">我问的是别名!</a>
</div>

<script type="text/javascript">
	var viewModel = function () {	
	   this.name = ko.observable("张三");
	   this.aliasName = ko.observable("三儿");
	};
	
	//var myModel = new viewModel();
	ko.applyBindings(new viewModel(),document.getElementById('divSample3'));
	
	
	var viewModel2 = function () {	
	   this.name = ko.observable("张三");
	   this.aliasName = ko.observable("三儿");
	};
	
	
	//更改绑定
	function updateBingding(){
	   //$("#span3").attr("data-bind", "text: aliasName");  //使用jQuery
	   var span3 = document.getElementById('span3'); //不使用jQuery
	   span3.setAttribute("data-bind", "text:aliasName");
	   ko.cleanNode(span3);
	   ko.applyBindings( new viewModel2(), span3);
	}
</script>

二、问题

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

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

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

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

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

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

三、增加和移除绑定

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

1、增加绑定

VIEW模型：

<h3>1、动态添加绑定</h3>
<div id="divSample1">
	<a href="javascript:void(0)" onclick="add_Binding()">添加绑定</a>
</div>

<script type="text/javascript">
	var viewModel = function () {	
	
	};
	
	var myModel = new viewModel();
	
	//添加绑定
	function add_Binding(){
	   //viewModel添加属性
	   myModel.des = ko.observable("this is a demo");
	   
	   //添加绑定元素
	   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>

VIEW模型：

<h3>2、移除绑定</h3>
<div id="divSample2">
	原始值：<span id='span1' data-bind='text: des'></span><br/>
	对照值：<span id='span2' data-bind='text: des'></span><br/>
	<a href="javascript:void(0)" onclick="changeModelValue()">改变model属性值</a>
	<a href="javascript:void(0)" onclick="removeBingding()">去除"对照值"的绑定</a>
</div>

<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"));
	
	//改变des值
	function changeModelValue(){
	   myModel.des(new Date().valueOf());
	}
	
	//移除绑定
	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>

参考：

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

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

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

标签：javascript   knockout   

原文地址：http://blog.csdn.net/hongweigg/article/details/43731413