本例双向绑定指的是 , Model <=> View ,之间的双向绑定;
最基本原理是通过 Object.defineProperty 实现了 Model=> View的绑定
document.addEventListener 实现了 View=>Model的绑定
HTML
<input id="a" type="text"><span id="b"></span>
JavaScript
let obj = {},
a = queryEl('#a'),
b = queryEl('#b'),
storeVal = '默认值'
a.value = storeVal
b.innerHTML = storeVal
Object.defineProperty(obj, 'hi', {
get() {
return storeVal
},
set(newVal) {
storeVal = newVal
a.value = storeVal
b.innerHTML = storeVal
},
})
a.addEventListener('input', () => {
obj.hi = event.target.value
})
function queryEl(el) { return document.querySelector(el) }
链接
双向绑定详情