关于jq建立类似与双向绑定的函数

函数:  

/**
* 页面元素与数据绑定
* @param elementIds
*/
function bindData(data){
var listener = {};
$("input,select,textarea").each(function(i,item){
if($(item).attr("id") != null){
data[$(item).attr("id")] = "";
$(item).change(function(){
if(data[$(this).attr("id")] == $(this).val()) return;
data[$(this).attr("id")] = $(this).val();
// parent.layer.msg("change:" + $(this).attr("id") + "的值变更为:" + $(this).val());
});

listener[$(item).attr("id")] = {
get: function() {
// parent.layer.msg("get:" + $(item).attr("id") + "的值为:" + $(item).val());
return $(item).val();
},
set: function(value) {
if(value == $(item).val()) return;
$(item).val(value);
data[$(item).attr("id")] = value;
// parent.layer.msg("set:" + $(item).attr("id") + "的值变更为:" + value);
}
};
if($("input,select,textarea").size() == i + 1){
Object.defineProperties(data, listener);
}
}
});

在页面js文件中需要调用函数
$(function(){
bindData(data); //将页面元素与data中的属性绑定,可通过data.xx获取对应ID元素的值

});

之后可以使用: 如 获取数据: var xx=data.xx;
修改数据: data.xx="xxx";


posted @ 2018-10-16 20:02  泽泽生龙  阅读(151)  评论(0编辑  收藏  举报