Knockout JS 增加、去除、修改绑定
来源:互联网 发布:淘宝网冬装女装 编辑:程序博客网 时间:2024/05/22 03:18
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>2、VIEW-MODEL
<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方法在取消绑定前,去除绑定的事件,然后再清除缓存的绑定配置,同时具有一定的通用性。
但这个方法应只对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>
VM模型:
<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>
2、去除绑定
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>
VM模型:
<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动态添加、移除绑定
0 0
- Knockout JS 增加、去除、修改绑定
- KnockOut绑定
- knockout.js表格删除增加行,计算总金额实例
- Knockout js类库学习笔记(一)数据绑定
- knockout js动态绑定viewModel的对象属性
- knockout.js
- knockout.js
- Knockout绑定语法
- Knockout模板绑定
- Knockout创建自定义绑定
- Knockout绑定数据
- Knockout 绑定列表
- knockout href 绑定
- Knockout 模版绑定
- knockout 多值绑定
- 乐趣:knockout foreach绑定
- 【Vanilla Js 02】事件绑定与去除
- knockout.js模板绑定之利用Underscore.js模板引擎示例
- linux 修改系统时间
- buildroot简单指导
- XAMPP中配置多个网站
- Storm消息机制
- eclipse+adt+gradle批量打包
- Knockout JS 增加、去除、修改绑定
- 看我了发的看我看我卡看我发打得过
- 如何在win7上搭建Android cocos2d-x-3.3开发环境
- 更快、更强——解析Hadoop新一代MapReduce框架Yarn
- linux下 tcpdump实现原理
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
- 的快疯了我空放我发了的快疯了我空调
- Storm Topology的并发度
- 音视频技术 如何在web平台实现本地内容向base64编码转换