jquery 简单双向绑定

最新推荐文章于 2024-06-26 09:36:54 发布

陆康永

最新推荐文章于 2024-06-26 09:36:54 发布

阅读量2.7k

点赞数 1

分类专栏：双向绑定

本文链接：https://blog.csdn.net/xiaomogg/article/details/50705003

版权

双向绑定专栏收录该内容

0 篇文章 0 订阅

订阅专栏

写在前面

1.学习backbone的时候接触到一个情况：model要求通过set来修改而不能直接修改attruebute[虽然也能修改值]

2.angular使用ng来绑定数据，avalon用ms-attr

这个和双向绑定有点关系，下面通过代码来解开之前的疑惑，红色部分为答案

参考：

http://www.oschina.net/translate/easy-two-way-data-binding-in-javascript

效果：

http://sandbox.runjs.cn/show/uqcfqkcj

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script  type="text/javascript" src="jquery-1.8.3.min.js"></script>

</head>
<body>
<h2>第一个实例</h2>
<input type="text" data-bind-123="name" /><div data-bind-123="name"></div>
<input type="text" data-bind-123="name2" /><div data-bind-123="name2"></div>
<input type="text" data-bind-123="name3" /><div data-bind-123="name3"></div>
<h2>第二个实例</h2>
<input type="text" data-bind-hehe="name3" /><div data-bind-hehe="name3"></div>
<input type="text" data-bind-hehe="name2" /><div data-bind-hehe="name2"></div>
<script>
   <!--这里放js代码-->
</script>
</body>
</html>

javascript:

var a = new Bidirectional({
$id:"123",
attr:{
name:"99",
name2:"22222",
name3:"22222"
}

});

var b = new Bidirectional({
$id:"hehe",
attr:{
name3:"我是第二个对象",
name2:"name2"
}

});

//修改数据，这里只用通过set修改才会同步到html
setTimeout(function(){
b.set({"name3": "999999"});

},1000);

//判断是否是json
var isJson = function(obj){
var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
return isjson;

};

//新建对象
function Bidirectional( opt ) {
//没吊用一次就新建一次对象
var uid=opt.$id;
var __This=this;
this.uid=opt.$id;
//html单项同步

this.DataBinder=function( object_id ) {

//把事件绑定在一个空白的jquery对象上

var pubSub = jQuery({});
var data_attr = "bind-" + object_id, message = object_id + ":change";
jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
var $input = jQuery( this );
var attr=$(this).attr("data-" + data_attr);
__This.vm.attributes[attr]=$input.val();
pubSub.trigger( message, [ $input.data( data_attr ), $input.val()] );

});

//这里的function里面的传参让我有点搞不懂
pubSub.on( message, function( evt, prop_name, new_val ) {
jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
var $bound = jQuery( this );
if ( $bound.is("input, textarea, select") ) {
$bound.val( new_val );
} else {
$bound.html( new_val );
}
});

});

return pubSub;

}

this.binder = new this.DataBinder(uid);

this.vm = {

attributes: {},

set: function( opt) {
//set接受一个json对象,二次调用的时候没有传值得key的值不会被修改，
if(isJson(opt)){
$.extend(__This.vm.attributes,opt);

console.log(__This.vm.attributes);

//只有通过set来修改才会触发同步函数

__This.binder.trigger( uid + "set"+":change", [ opt, this ] );
}
else{
throw Error("set只接受不为空的json格式数据")
}
},
get: function( attr_name ) {
return this.attributes[ attr_name ];
},
_binder:this.binder

};

//判断初始化传值

this.vm.attributes=opt.attr!=""?opt.attr:{};

//向html单项同步

Singlesynchronous();

function Singlesynchronous(){

//这里可以和avalon的指令“ms-html、ms-repeat那样实现字符串、数组的处理”

$( "[data-bind-" +uid+ "]").each(function(){
var key=$(this).attr("data-bind-"+uid);
if($(this).is("input, textarea, select") ){
$(this).val( __This.vm.attributes[key] );
}
else{
$(this).html( __This.vm.attributes[key] );
}
});

}

//修改的时候触发向HTML单项同步
this.binder.on( uid + "set"+ ":change", function( evt, opt, initiator ) {
Singlesynchronous();

});

//通过return可以屏蔽对象下的其他方法属性，通过console.log（new Bidirectional（））查看到的是vm下属性方法

return this.vm;
}