用jquery实现数据双向绑定

javascript code

  function DataBinder (objectId) {
    // 使用jQuery空对象作为监听对象
    var pubSub = jQuery({});
    //
    var dataAttr = 'bind-' + objectId;
    var message = objectId + ':change';
    // 监听dom中所有元素的 data-binding 属性变化。并由pubSub来处理。
    $(document).on('input change', '[data-' + dataAttr + ']', function (event) {
        var $ele = $(this);
        console.log('$ele', $ele);
        pubSub.trigger(message, [$ele.data(dataAttr), $ele.val()]);
    });
    // pubSub把数据变化推送给所有与之绑定的页面元素
    pubSub.on(message, function (event, proName, newValue) {
        $('[data-' + dataAttr + '=' + proName + ']').each(function () {
            var $ele = $(this);
            if($ele.is('input, textarea, select')) {
                $ele.val(newValue);
            } else {
                $ele.html(newValue);
            }
        })
    });
    return pubSub;
}
function User(uid) {
    var binder = new DataBinder(uid);
    var user = {
        attributes: {},
        set: function (attrName, val) {
            this.attributes[attrName] = val;
            binder.trigger(uid + ':change', [attrName, val, this]);
        },
        get: function (attrName) {
            return this.attributes[attrName];
        },
        _binder: binder
    }
    return user;
}

调用的时候，用uid与之关联。

javascript code

var user = new User('user');
    $('#btnSet').bind('click', function (event) {
 user.set('name', 'Liuyuan211');

该例子中，uid就是 data-bind-user="name" 中的 user ，绑定的页面元素会自动与user对应的属性关联。