动手实现数据双向绑定Getter/Setter(2)

2015-12-31  本文已影响700人  忧郁的河蟹

基本原理

对于Getter/Setter实现的数据双向绑定来说,核心在于重定义model的getter与setter方法,在数据变动的时候重新渲染页面。

1.监听model属性变化,当属性产生变化的时候,修改对应对应的节点内容。

function getProxyModel() {
    var obj = {}
    var self = this;
    var model = this.model;
    var model2sync = this.model2sync; //model2sync 存放模型节点
    
    each(Object.keys(model), function(i, k) {
      Object.defineProperty(obj, k, {
        set: function(v) {
          model[k] = v
          var arr = model2sync[k]; 
          each(arr, function() {
            this.node.textContent = self.renderStr(this.raw)
          })
        },
        get: function() {
          return model[k]
        }
      })
    })
    return obj
  }

2.监听事件对view的变化,当view修改后,修改对应model的数值,触发重新渲染。

// 绑定view事件
this.on(this.dom, ['keyup', 'click'], function(e) {
  var name = e.target.name
  if (name) {
    if (e.target.value != self.model[name]) {
      self.model[name] = e.target.value
    }
  }
})

代码参考:
http://codepen.io/youyudehexie/pen/BjQZEo

上一篇下一篇

猜你喜欢

热点阅读