3-17作业

来源：3-17 【学习任务】使用Proxy与Reflect实现双向绑定的列表

_jmxiao

2021-10-15

图片描述

老师，请问这样可以实现双向数据绑定吗？还有一个问题，双向数据绑定可以通过数据驱动视图，同时也可以通过视图去修改数据，但是上面好像只是实现了数据修改==>视图修改

写回答

1回答

谢成

2021-10-18

下面的代码可以作为参考：

const input = document.getElementById('input')
const text = document.getElementById('text')
const list = document.getElementById('list')
const btn = document.getElementById('btn')

let render

const inputObj = new Proxy({}, {
get(target, key, receiver) {
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
if (key === 'text') {
input.value = value
text.innerHTML = value
}
return Reflect.set(target, key, value, receiver)
}
})

class Render {
constructor(arr) {
this.arr = arr
}
init() {
const fragment = document.createDocumentFragment()
for (let i = 0; i < this.arr.length; i++) {
const li = document.createElement('li')
li.textContent = this.arr[i]
fragment.appendChild(li)
}
list.appendChild(fragment)
}
addList(val) {
const li = document.createElement('li')
li.textContent = val
list.appendChild(li)
}
}

const todoList = new Proxy([], {
get(target, key, receiver) {
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
if (key !== 'length') {
render.addList(value)
}
return Reflect.set(target, key, value, receiver)
}
})

window.onload = () => {
render = new Render([])
render.init()
}

input.addEventListener('keyup', e => {
inputObj.text = e.target.value
})

btn.addEventListener('click', () => {
todoList.push(inputObj.text)
inputObj.text = ''
})