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

Posted 2021-01-13 chenlongsheng

函数：  

/**
 * 页面元素与数据绑定
 * @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";