一、两个model之间的双向绑定
var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b); // "1" //更新o.a o.a = 5; o.b = o.a + 1; console.log(o.a); // "5" console.log(o.b); // "6" //更新o.b o.b = 10; o.a = o.b / 5; o.b = o.a + 1; console.log(o.a); // "2" console.log(o.b); // "3"
var o = { a: 0 } Object.defineProperty(o, "b", { get: function () { return this.a + 1; }, set: function (value) { this.a = value / 5; } }); console.log(o.a); // "0" console.log(o.b); // "1" // 更新o.a o.a = 5; console.log(o.a); // "5" console.log(o.b); // "6" // 更新o.b o.b = 10; console.log(o.a); // "2" console.log(o.b); // "3"
二、model和view之间的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js实现数据双向绑定</title> </head> <body> <input type="text" id="J_input"> <script> //数据层Model var dataObj = { nkey:'camille' } //视图层view var J_input = document.getElementById('J_input'); //逻辑层viewModel function manualBind(nkey,nvalue){ dataObj.nkey = nvalue; J_input.value = nvalue;//属性设置 //J_input.setAttribute('value',nvalue);会直接在dom中看到属性,属于添加属性的方法。 } /** * 功能:改变view,更新model * 测试方法:在文本框输入不同内容,在控制台打印dataObj.nkey,即可看到dataObj.nkey最新值。 */ J_input.addEventListener('keyup',function(e){ manualBind('nkey',e.target.value); },false); /** * 功能:改变model,更新view * 测试方法: * 1、在控制台写dataObj.nkey = 'username';并手动调用manualBind('nkey',dataObj.nkey); * 2、打印document.getElementById('J_input').value;即可看到view层的变化。 */ // manualBind('nkey','camille666'); </script> </body> </html>
原生js实现双向数据绑定的更多相关文章
-
用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
-
真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
-
原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
-
原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
-
js实现一个简单的响应式双向数据绑定
一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...
-
Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
-
原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
-
JS 双向数据绑定、单项数据绑定
简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
-
JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
随机推荐
-
as3绕过策略文件给视频截图
接上篇 http://www.cnblogs.com/DarkMaster/p/5973593.html 这篇同样是在老外博客上找到的,分享给大家,再次感叹老外牛逼啊. 原文地址:http://gam ...
-
SqlIte数据库并发性
把遇到的一些小问题都记下来,告诉自己,一些小细节会铸成打错的 今天没事复习以前的知识,用sqlite做数据库,发现修改数据的时候等好久才有反应,而且还失败,可是过一会之后又会好,好了以后又是一样,种以 ...
-
Log4j用法
本篇仅仅是简单介绍了在写一个测试例子时,怎么使用log4j的经验,如果用于生产环境,估计还需要在深入一步去了解更多详细的配置信息. log4j.properties 配置信息: log4j.rootL ...
-
objective-c 下面int 和 NSData数据 互相转换的方法
抄自这里 ; NSData *data = [NSData dataWithBytes: &i length: sizeof(i)]; int i; [data getBytes: & ...
-
hdu 3530 Subsequence
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=3530 Subsequence Description There is a sequence of i ...
-
使用C#通过Thrift访问HBase
前言 因为项目需要要为客户程序提供C#.Net的HBase访问接口,而HBase并没有提供原生的.Net客户端接口,可以通过启动HBase的Thrift服务来提供多语言支持. Thrift介绍 环境 ...
-
为大型数据文件每行只能产生id
为大型数据文件每行只能产生id 4个主要思路: 1 单线程处理 2 普通多线程 3 hive 4 Hadoop 搜到一些參考资料 <Hadoop实战>的笔记-2.Hadoop输入与输出 h ...
-
struts2.1.6教程九、文件上传下载(了解)
首先建立struts2UpDownLoad项目,搭建好struts2基本的开发环境. 上传实例 步骤一:upload.jsp代码如下: <s:form action="upload&q ...
-
Jenkins在shell脚本运行docker权限报错解决
报错环境 系统信息 Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS Release: 16.04 Codename: xenial doc ...
-
Java基础之流程控制
一.顺序结构 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. if-else-if 语句 语法: if(条件){ 当条件为true时,执行大括号内的代码 }el ...