js实现双向数据绑定
来源:互联网 发布:算法第四版pdf 编辑:程序博客网 时间:2024/04/28 22:55
需求
现在的框架都讲究什么单向绑定,双向绑定的都是什么东西?
- 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。
- 双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。就是我不管修改数据模型的相关数据,还是视图上的数据,相对应的数据也会跟着更新。
实现原理
主要的就是事件的绑定。
- 在视图层(View)上,可以绑定keyup事件,来更新数据模型
- 在数据模型上面利用Object.defineProperty()方法定义对象的set方法,在触发对象属性设置时,将view层的数据也修改掉。
案例代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="myinput" ><script> var input = document.getElementById("myinput"); var obj = {}; Object.defineProperty(obj, "input", { get: function () { return input.value; }, set: function (val) { input.value = val; changeCallback(input.value); } }); input.onkeyup = function () { obj.input = input.value; }; function changeCallback(val) { console.log("这里是不管view层,还是module层修改后的回调,最后设置的值是"+val); }</script></body></html>
思路
- 首先,我们先使用Object.defineProperty()方法设置obj的set方法,只要修改obj的input属性,就会触发这个这个set方法,然后触发回调,这就实现了module层的数据绑定。
- 然后,再input上绑定keyup事件,实现了view层的绑定。
- 只要两者有一个修改,不管input的value值,还是获取obj的input属性,都是获取最新修改的值。
- 这应该是最简单的思路了。
阅读全文
0 0
- js实现双向数据绑定
- 用原生js实现数据双向绑定
- js原生代码实现数据双向绑定
- js发布订阅实现双向数据绑定
- vue.js双向数据绑定实现原理
- 原生js 实现双向数据绑定
- 手写JS双向数据绑定
- vue.js双向数据绑定
- JS原生数据双向绑定
- 原生JS实现angular的双向数据绑定
- Vue:实现双向数据绑定
- jq 实现数据双向绑定
- Vue.js学习 Item4 -- 数据双向绑定
- vue.js表单数据双向绑定
- Angular JS中的数据双向绑定
- angular.js学习(1)--双向数据绑定
- Vue.js双向数据绑定原理
- angular.js 双向数据绑定,依赖注入
- 算法-计算时间复杂度
- scp传输无须密码
- 【20171010】C语言每日一练
- SpringMVC数据绑定一(基本数据类型及包装类型)
- 数据结构顺序表1(数组)
- js实现双向数据绑定
- 四、Spark性能优化:shuffle调优
- Linux-第七单元总结
- redis 验证码
- linux 基础4
- mybatis高级结果映射collection
- Python_2
- centos mariadb10.2 国内源
- tar