knockout动态添加、移除绑定

本篇文章并非是什么新的技术，只是一个小的技巧罢了，在此稍微总结下。

动态添加绑定很简单，ko.applyBindings(viewModel, element)很强大，可以让我们任意、任时添加绑定。移除绑定，很可惜knockout并没有提供这个功能，需要做些小的变向。

引入文件

<script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script>
<script type='text/javascript' src='http://www.see-source.com/js/jquery-1.6.2.min.js'></script>

jquery，只是偶尔用到。

动态添加绑定

给已经存在的dom元素或新建的dom元素添加绑定，例子如下：

Html代码

<a href="javascript:void(0)" onclick="add_Binding()">添加绑定</a>

Js代码

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

移除绑定

移除绑定也很简单，只需要将data-bind属性清空即可，当knockout察觉到这一变化时，会自动将该元素的绑定去除。

Html代码

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

Js代码

<script type="text/javascript">
var viewModel = function () {	
   this.des = ko.observable("this is a demo");
};
var myModel = new viewModel();
ko.applyBindings(myModel);
//改变des值
function changeModelValue(){
   myModel.des(new Date().valueOf());
}
//移除绑定
function removeBingding(){
   $("#222").attr("data-bind", "");
}
</script>

改变vievModel的des值时，"原始值"、和"对照值" 一同变化。当去除"对照值"的绑定时，"对照值"不在变化。实际上，并非将"data-bind"属性清空，绑定就会立即消失，而是当下一次ko被触发时，处理到该元素了，才会真正移除绑定。

更改绑定

如果要更改以前的绑定，我们需要将"data-bind"属性修改的同时，再次通过ko.applyBindings申请绑定才行。

Html代码

你叫啥?：<span id='111' data-bind='text: name'></span><br/>
<a href="javascript:void(0)" onclick="updateBingding()">我问的是别名!</a>

Js代码

<script type="text/javascript">
var viewModel = function () {	
   this.name = ko.observable("张三");
   this.aliasName = ko.observable("三儿");
};
var myModel = new viewModel();
ko.applyBindings(myModel);
//更改绑定
function updateBingding(){
   $("#111").attr("data-bind", "text: aliasName");
   var element = document.getElementById("111");
   ko.applyBindings(myModel, element);
}
</script>

+友情链接