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应 ...
随机推荐
- 华为Fusioncompute 6.5.1
V6.5.1VRM“gandalf”用户的默认密码为“IaaS@OS-CLOUD9!”.CNA“gandalf”用户的默认密码为“IaaS@OS-CLOUD8!”.普通模式:admin/LaaS@PO ...
- SIFT学习笔记之一 下载和调用
下面给出了多个参考地址,挑个能用的吧: vs2010+Rob Hess SIFT: http://blog.csdn.net/lanbing510/article/details/8507341 R ...
- TensorFlow.资料
1.ZC:看来 要用 TensorFlow,基本逃不过 Python了... TensorFlow物体识别——通过机器学习搭建属于自己的物体识别库 - 迷途无归的博客 - CSDN博客.html(h ...
- java面试指导_垃圾收集
Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配.同时,Java 自动内存管理最核心的功能是 堆 内存中对象的分配与回收. Java 堆是垃圾收集器管理的主要区域,因此也被称作GC 堆 ...
- python一个源文件调用另一个源文件的函数
使用软件:pychram 这个是使用了Dight.py的mai()函数,也已经成功运行,但是为什么pychram在下面划红色的波浪线呐.
- Object类的equals方法 常用API
boolean equals (Object obj)(return this==obj): p1.equals(p2): 基本数据类型比较的是值 引用数据类型:默认比较的是两个对象的地址 ...
- java23种设计模式之七: 观察者模式
一.应用背景 观察者模式又称为发布/订阅(Publish/Subscribe)模式,我们可以理解为:只有关注信公众号关注后才能收到信息 二.优.缺点 优点: 1.可以动态的改变对象的行为 缺点 ...
- H3C路由器登录策略专题讲解
password-control login-attempt login-times [ exceed { lock | lock-time time | unlock } ] undo passwo ...
- 使用pycharm开发web——django2.1.5（四）视图和模板相关
刘老师说这块很重要..... 应该是很重要,大概看了一下,这里面关于views中函数作用,大概看来可能就是相应请求,传入数据和跳转,基本功能上貌似这些框架都差不多吧(其实我并没用过3个框架以上.... ...
- quartz报错 org.quartz.impl.StdSchedulerFactory.
quartz任务执行报错 Exception in thread "main" java.lang.NoClassDefFoundError: org/slf4j/LoggerFa ...