介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> data-binding-method-set</title>
& lt;/head>
& lt; body>
& lt;才能input 核反应能量=https://www.yisu.com/zixun/凹壑怠眛ype="文本" id="输入">
<>脚本
var elem=[. getelementbyid (el) . getelementbyid(“输入”)];
var data={
价值:“你好!”
};={var命令
文字:函数(str) {
这一点。innerHTML=str;
}，
价值:函数(str) {
这一点。setAttribute(“价值”,str);
}
};
var扫描=function () {/* *
*扫描带指令的节点属性
*/(var=0, len=elems.length;我<兰;我+ +){
var elem=elem[我];
elem.command=[];
(var j=0, len1=elem.attributes.length;j =0) {/* *
*调用属性指令,这里可以使用数据改变检测
*/命令(attr.nodeName.slice (2)]。调用(elem数据[attr.nodeValue]);
elem.command.push (attr.nodeName.slice (2));
}
}
}
}/* *
*设置数据后扫描
*/函数mvSet(关键字,值){
数据(关键)=价值;
扫描();
}/* *
*数据绑定监听
*/elem [1]。addEventListener(“弹起”,函数(e) {
e.target.value mvSet(“价值”);
},假);
扫描();/* *
*改变数据更新视图
*/setTimeout(函数(){
mvSet(“价值”,“他妈的”);
},1000)>
小编给大家分享一下javascript实现数据双向绑定的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>前端数据的双向绑定方法
前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。
<强> 1,手动绑定
比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义获取和设置方法(当然还有其它方法),调用时手动调用获取或设置数据,改变数据后出发UI层的渲染操作,以视图驱动数据变化的场景主要应用与输入、选择、文本区域等元素,当UI层变化时,通过监听dom的变化,键盘按键,按键弹起等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。