美文网首页
动手实现数据双向绑定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)

    基本原理 对于Getter/Setter实现的数据双向绑定来说,核心在于重定义model的getter与sette...

  • js setter & getter

    在mvvm框架中,数据双向绑定的底层实现中会用到setter和getter,javascript的中的setter...

  • Vue双向绑定

    Vue双向绑定 Obejct.defineProperty的setter/getter和发布订阅 Vue双向绑定原...

  • 中软电商项目组

    - 1.vue双向数据绑定是基于什么原理 +setter,getter核心就是Object.definePro...

  • vue相关

    vue特性,双向数据绑定的实现原理 通过Object.defineProperty()来劫持各个属性的setter...

  • 美团面试总结

    1.angularJS双向绑定实现2.双向绑定的其他实现3.使用get,set实现双向数据绑定4.三列布局实现的三...

  • kotlin精讲-第3章(2)setter和getter

    setter、getter Kotlin默认帮我们实现了setter、getter,算是setter和getter...

  • Vue 2.5 数据绑定实现逻辑(一)整体逻辑

    在概述中说到,Vue2.5的数据绑定主要是通过对象属性的 getter 和 setter 的钩子来实现的,总的来说...

  • 剖析Vue原理&实现双向绑定MVVM

    1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 几种实现双向绑定的做法...

  • vue 双向数据绑定

    Vue实现数据双向绑定的原理:Object.defineProperty()vue实现数据双向绑定主要是:采用数据...

网友评论

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

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