php 双向数据绑定,js实现双向数据绑定的方法

news/2024/7/4 9:08:32

需求

现在的框架都讲究什么单向绑定,双向绑定的都是什么东西?

- 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。

- 双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。就是我不管修改数据模型的相关数据,还是视图上的数据,相对应的数据也会跟着更新。

实现原理

主要的就是事件的绑定。

- 在视图层(View)上,可以绑定keyup事件,来更新数据模型

- 在数据模型上面利用Object.defineProperty()方法定义对象的set方法,在触发对象属性设置时,将view层的数据也修改掉。

案例代码

Title

思路首先,我们先使用Object.defineProperty()方法设置obj的set方法,只要修改obj的input属性,就会触发这个这个set方法,然后触发回调,这就实现了module层的数据绑定。

然后,再input上绑定keyup事件,实现了view层的绑定。

只要两者有一个修改,不管input的value值,还是获取obj的input属性,都是获取最新修改的值。

这应该是最简单的思路了。


http://www.niftyadmin.cn/n/1999361.html

相关文章

生活的忠告

生活的忠告: 多吃些粗粮。 给别人比他们自己期许的更多,并且用心去做。 熟记你喜欢的诗歌。 不要轻信你听到的每件事,不要花光你的所有,不要想睡多久就睡多久。 无论何时说“我爱你”,请真心实意。 无论何时说“…

idea+jfinal+mysql项目注意事项

2019独角兽企业重金招聘Python工程师标准>>> 1.git导入之前的项目,如果找不到git.exe,配置git安装目录 2.配置jdk 3.配置编译路径 转载于:https://my.oschina.net/u/3559695/blog/1580877

正则复习2

扩展awk 中使用外部shell变量http://ask.apelearn.com/question/199命令示例:A44echo "ABCD" | awk -v GET_A$A {print GET_A} 说明:-v选项用于定义参数,这里表示将变量A的值赋予GET_A。有多少个变量需要赋值,就需要多少…

[LeetCode]Palindrome Partitioning 找出所有可能的组合回文

给定一个字符串&#xff0c;切割字符串&#xff0c;这样每个子字符串是一个回文字符串。 要找出所有可能的组合。 办法&#xff1a;暴力搜索回溯 class Solution { public:int *b,n;vector<vector<string> >ans;void dfs(int id,string &s,int len){if(id>n…

oracle 更改分区列,ORA-14061: 不能更改索引分区列的数据类型或长度

本文将为您描述ORA-14061: 不能更改索引分区列的数据类型或长度,具体操作过程:修改分区表主键时报错&#xff1a;在行: 2 上开始执行命令时出错 -alter table KC23 modify AAZ210 VARCHAR2(50)错误报告 -SQL 错误: ORA-14061: 不能更改索引分区列的数据类型或长度14061. 00000 …

Windows Mobile 设备中心 for vista 一览

Microsoft Windows Mobile 设备中心 6.1 在6月6日发布了最新版&#xff0c;今天为了能在Vista开发PPC(或Wince设备&#xff09;程序&#xff0c;下载安装了该程序&#xff0c;启动后界面确实很炫&#xff0c;和媒体中心的风格有些类似。不过我用VS2005开发的程序&#xff0c;通…

VC线程同步技术剖析

VC线程同步技术剖析作者&#xff1a;xuefeifei 来源&#xff1a;zz 发表时间&#xff1a;2006-12-09 摘要&#xff1a; 多线程同步技术是计算机软件开发的重要技术&#xff0c;本文对多线程的各种同步技术的原理和实现进行了初步探讨。 关键词&#xff1a; VC6…

oracle 表空间重建,oracle 剔除和重建表空间脚本

oracle 删除和重建表空间脚本调试数据库生成脚本&#xff0c;需要频繁重建表空间/**清除原有表空间重建表空间和用户**/declaretbs varchar2(100):TS_data; --表空间名称tbs_tpm varchar2(100):data_TEMP;--临时表空间名称uname varchar2(100):user;--用户名 密码为用户名小写f…