Knockout JS 增加、去除、修改绑定
JS 修改 绑定 增加 去除 Knockout
2023-09-14 09:00:19 时间
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>
说明:此例参照了网上一位兄弟的示例,其思路比较清晰,但其提供的示例并没有真正解决多次绑定的问题,向这位兄弟表示感谢。
参考:
相关文章
- JS懒加载实现
- 【CSS动效实战(纯CSS与JS动效)】02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探
- JS–免费刷流量软件工具源码
- pdf.js预览pdf文件流(base64)
- JS设置定时器_js设置定时器
- JS如何返回异步调用的结果?
- JS将日期转换为时间戳
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- js 修改文本内容
- JS代码如何嵌入到网页中
- 利用 JS 实现 Redis 的连接(js连接redis)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- 一个支持ff的modaldialog的js代码
- 比较平滑的js控制textaera的高度
- JS函数验证总结(方便js客户端输入验证)
- CSS和JS标签style属性对照表(方便js开发的朋友)
- js鼠标滑过弹出层的定位IE6bug解决办法
- JS修改URL参数(实现代码)
- js获取URL的参数的方法(getQueryString)示例
- js修改input的type属性问题探讨
- js弹出框只弹一次(二次修改之后的)
- javascript分页代码实例分享(js分页)
- js对table的td进行相同内容合并示例详解
- JS和Jquery获取和修改label的值的示例代码
- 利用浏览器全屏api实现js全屏
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- js获取当前地址JS获取当前URL的示例代码