美文网首页
动手实现数据双向绑定Getter/Setter(2)

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

作者: 忧郁的河蟹 | 来源:发表于2015-12-31 10:36 被阅读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

    相关文章

      网友评论

          本文标题:动手实现数据双向绑定Getter/Setter(2)

          本文链接:https://www.haomeiwen.com/subject/mayihttx.html