您的位置：首页 > Web前端 > JavaScript

js mvvm:闲来无事，实现一个只具最基本数据双向绑定的mvvm

2014-09-13 11:04 645 查看

近期项目内用knockoutjs。

想模拟实现数据双向绑定的基本功能。

只具有最基本的功能，且很多细节未曾考虑，也未优化精简。

能想到的缺少的模块

1事件监听，自定义访问器事件

2模版

3父子级

编码时，有两个循环陷阱。

只依赖浏览器，打开即可运行。

工作以后端和数据为主，前端较生疏，将就看吧

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br>
<lable>name</lable><input type="text" data-bind="name" value="old"/><br>
<lable>age</lable><input  type="text" data-bind="value" value="18"/><br>
<!--<lable>sex</lable><input  type="text"  value="男"/><br>-->
<input type="button" onclick="mvvm.bind(window.ViewModel)" value="绑定数握">
<input type="button" onclick="mvvm.Saybind(window.ViewModel)" value="查看数据">
<input type="button" onclick="window.ViewModel.changename()" value="改名">

</body>
<script>
(function(win){
window.mvvm={
bind:function(obj){
var inputs = document.getElementsByTagName("input");
if(!obj.hasini){
alert("初始化访问器")
//为model添加访问器,目的，是model时更新UI
for (var Property in obj) {
(function(){
var proname=Property;
var priname="_"+proname;
if(typeof obj[Property]!="function"){
obj[priname]=obj[proname];
obj[proname]=null;
var setget={
get: function () {
return obj[priname]
},
set:function (value) {
obj[priname] = value;
for (var i = 0; i < inputs.length; i++) {
var att = inputs[i].getAttribute("data-bind");
if (att == proname) {
inputs[i].value = obj[priname];
break;
}
}
}
}
Object.defineProperty(obj, proname, setget);
}
})(obj,Property)
}
}
obj.hasini=true;
alert("初始化完成")
//为UI绑定model的值，并为UI添加事件，修改UI时更新Model值。
for (var i = 0; i < inputs.length; i++) {
var inputdom = inputs[i];
var att = inputdom.getAttribute("data-bind");
if (att != null) {
for (var Property in obj) {
if (Property == att) {
//                      绑定属性
inputdom.value = obj[Property];
//                      绑定事件
inputdom.onchange = function () {
obj[this.getAttribute("data-bind")] = this.value;
}
}
}
}
}
},
Saybind:function(obj){
alert(obj.toString());
}
}

})(window);
var ViewModel={
name:"cui",
value:"24",
toString:function(){
var ps="";
for(var Property in this){
if(typeof this[Property]!="function")
ps+=Property+":"+this[Property]+";"
}
return ps;
},
changename:function(){
this.name="daming";
}
} ;

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航