JavaScript实现数据的双向绑定
接触到Angulr.js和Vue.js后，提到最多的就是双向绑定
下面将用JavaScript实现数据的双向绑定
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="foo" value="as"/>
</body>
<script type="text/javascript">
function bindModelInput(obj, property, domElem) {
Object.defineProperty(obj, property, {
get: function() {
return domElem.value;
},
set: function(newValue) {
debugger;
domElem.value = newValue;
},
configurable: true
});
}
user = {};
var inputElem = document.getElementById("foo");
bindModelInput(user,'name',inputElem);
debugger;
user.name = "Joe";
alert("input value is now "+inputElem.value) //input元素现在的值是'Joe'
inputElem.value = 'Bob';
alert("user.name is now "+user.name) //现在model中的value是Bob
</script>
</html>
JavaScript实现数据的双向绑定的更多相关文章
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- 数据的双向绑定 Angular JS之开端篇
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- AnjularJS系列3 —— 数据的双向绑定
第三篇,双向的数据绑定 数据绑定是AnguarJS的特性之一,避免书写大量的初始代码从而节约开发时间 数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应 ...
随机推荐
- 获取淘宝客推广位id(adzone_id)
在 获取淘宝联盟选品库的宝贝信息 这个接口中需要用到 推广位id,那边这个ID在哪找呢?1.进入阿里妈妈后台>推广管理>推广位管理,如下图: 2.在推广位管理 列表页 找到 PID,最后一 ...
- 第7章：LeetCode--算法：递归问题
70. Climbing Stairs This problem is a Fibonacci problem.F(n)=F(n-1)+F(n-2);Solving this problem by r ...
- 初识php语法
初到一家php公司,由于之前做的java,现在记录一些学习php中的语法细节. =>的用法 => 是数组成员访问符号.在php中数组默认键名是整数,也可以自己定义任意字符键名(最好是有实际 ...
- 【01字典树】hdu-5536 Chip Factory
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5536 [题意] 求一个式子,给出一组数,其中拿出ai,aj,ak三个数,使得Max{ (ai+aj ...
- .Net C# Dictionary 和参数字符串互转
#region Parse #region Dictionary Parse To String /// <summary> /// Dictionary Parse To String ...
- 怎样在浏览器端增加一条Cookie
可以使用 document.cookie, 这个属性可读可写, 读时是读取所有没有设置HttpOnly的cookie作为一个字符串返回, 写时是将一个cookie写入到document.cookie中 ...
- python 比对PDF文件
基本思路: 1.读取pdf内容,存放到不同的 list 2.比较 list 的相似度 ------------------------ 实现------------------------- 1.PD ...
- Spring ——获取IOC容器时，构造方法、set方法、类方法执行顺序
1,首先,我们在ApplicationContext.xml中会写下下面类的标示: <bean id="helloword" class="com.xt.frist ...
- 【原创】大叔问题定位分享（36）openresty(nginx+lua)中获取不到post数据，ngx.req.get_body_data返回nil
openresty(nginx+lua)中获取不到post数据,ngx.req.get_body_data返回nil This function returns nil if the request ...
- Python 序列操作符与函数（字符串）
Python序列包括:元组.列表.字符串. 1.1 序列共同支持的函数: 函数 功能 说明 cmp(seq1,seq2) 比较序列大小 从左到右依次比较,直到比较出大小 len(seq1) 获取序列长 ...