3-17作业问题

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

慕粉孔帅

2021-09-12

图片描述
老师你好，目前在做3-17的作业，关于输入框输入内容span标签对应显示已经实现，但是在让li标签新增对应内容这个需求上面遇到了一些问题。这里的aLi是在click函数里面创建的，无法在set里面设置内容。虽然我知道因为作用域肯定不能设置内容，但是如果我把aLi放到代码顶部依然无法设置内容，我想知道该怎么修改，我觉得思路是正确的，就是代码部分有些问题导致无法实现

写回答

1回答

谢成

2021-09-13

可以参考这这段代码的思路：

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 = ''
})