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应 ...
随机推荐
- SSH连接时root用户无法验证通过
解决办法是: vi /etc/ssh/sshd_config 找到 # Authentication: PermitRootLogin without passwd 改成 # Authenticati ...
- Redis-负载均衡
摘要 在nginx里面配置一个upstream,然后把相关的服务器ip都配置进去.然后采用轮询的方案,然后在nginx里面的配置项里,proxy-pass指向这个upstream,这样就能实现负载均衡 ...
- SQL SERVER ISDATE函数
定义: ISDATE函数判断指定字符串是否是有效日期. 语法: ISDATE(date) 参数: ①date是需要判定是否是有效日期的字符串 返回值: int型数据 例: 声明:本文是本人查阅网上及 ...
- QT 打包exe
QT打包主要方法: 1.把无措的代码进行Release编译 2.在运行完后,找到运行后生成的目录,以下是我的文件,名为result,运行类型有两种,一种是Debug,另一种是Release,我们需要的 ...
- 三分钟搞定Python中的装饰器
python的装饰器是python的特色高级功能之一,言简意赅得说,其作用是在不改变其原有函数和类的定义的基础上,给他们增添新的功能. 装饰器存在的意义是什么呢?我们知道,在python中函数可以调用 ...
- S03_CH02_AXI_DMA PL发送数据到PS
S03_CH02_AXI_DMA PL发送数据到PS 1.1概述 本课程的设计原理分析. 本课程循序渐进,承接<S03_CH01_AXI_DMA_LOOP 环路测试>这一课程,在DATA ...
- 并不对劲的CF1194E:Count The Rectangles
题意 有\(n\)(\(n\leq 5000\))个平行于x轴或平行于y轴的线段.求这些线段围成了多少个长方形.由多个长方形拼成的也算. 题解 考虑暴力的做法:先分别计算每条横着的线与哪些竖着的线有交 ...
- Earth Wind and Fire CodeForces - 1148E (构造)
大意: $n$个石子, 第$i$个石子初始位置$s_i$, 每次操作选两个石子$i,j$, 要求$s_i<s_j$, 任取$d$, 满足$0\le 2d\le s_j-s_i$, 将$s_i,s ...
- 1、ECharts（中国地图篇）的使用
一.网址: http://echarts.baidu.com/download.html点击: 完整下载文件: echarts.min.js ...
- mybatis的BLOB存储与读取
http://blog.csdn.net/luyinchangdejiqing/article/details/45096689 简单介绍一下背景环境,web开发避免不了照片附件之类的东东,原先是存到 ...