JavaScript中的MVC，如何在模型中进行更改

嗨，伙计们，我想了解MVC模型。起初，我用clear JS Vanilla制作了待办事项列表，但现在我尝试用ES6和MVC来制作。我遵循这个指南，我被困在那个时刻，当我想显示的变化。如何从模型调用某些内容已更改为视图？半路不行

类模型{
构造函数（）{
这件事改变了
this.todos=[
{id:1，文本：'TEST'，complete:false}，
]
}
bindTodoListChanged（回调）{
console.log（回调）；
this.onToDoListChanged=回调
console.log（this.onToDoListChanged）；
}
addTodo（todoText）{
常数todo={
id:this.todos.length>0？this.todos[this.todos.length-1]。id+1:1，
文本：todoText，
完成：错误，
}
this.todos.push（todo）
this.onTodoListChanged（this.todos）
}
editTodo（id，updatedText）{
this.todos=this.todos.map（todo=>todo.id==id？{id:todo.id，text:updatedText，complete:todo.complete}:todo
)
}
删除TODO（id）{
this.todos=this.todos.filter（todo=>todo.id！==id）
this.onTodoListChanged（this.todos）
}
切换TODO（id）{
this.todos=this.todos.map（todo=>todo.id===id？{id:todo.id，text:todo.text，complete:！todo.complete}:todo）
this.onTodoListChanged（this.todos）
}
}
类视图{
构造函数（）{
this.app=this.getElement（“#root”）
//头衔
this.title=this.createElement（'h1'）
this.title.textContent='Todos'
this.form=this.createElement（'form'）
this.input=this.createElement（'input'））
this.input.type='text'
this.input.placeholder='addtodo'
this.input.name='todo'
this.input.autocomplete='off'
this.submitButton=this.createElement（'按钮'）
this.submitButton.textContent='Submit'
this.todoList=this.createElement（'ul'，'todo list'）
this.form.append（this.input，this.submitButton）
this.app.append（this.title、this.form、this.todoList）
}
获取_todoText（）{
返回此.input.value
}
_重置输入（）{
this.input.value=“”
}
createElement（标记、类名）{
常量元素=document.createElement（标记）
if（className）element.classList.add（className）
返回元素
}
getElement（选择器）{
常量元素=document.querySelector（选择器）
返回元素
}
显示待办事项（待办事项）{
而（这个。托多利斯特。第一个孩子）{
this.todoList.removeChild（this.todoList.firstChild）
}
如果（todos.length==0）{
常量p=this.createElement（'li'）
p、 textContent='无事可做！添加任务？'
this.todoList.append（p）
}否则{
todo.forEach（todo=>{
const li=this.createElement（'li'）
li.id=todo.id
const checkbox=this.createElement（'type'）
checkbox.type='checkbox'
checkbox.checked=todo.complete
const span=this.createElement（'span'）
//span.contentEditable=true
//span.classList.add（'可编辑'）
如果（待办事项完成）{
常量strike=this.createElement（'s'）
strike.textContent=todo.text
span.追加（罢工）
}否则{
span.textContent=todo.text
}
const deleteButton=this.createElement（'button'，'delete'）
deleteButton.textContent='Delete'
li.append（复选框、范围、删除按钮）
this.todoList.append（li）
})
}
}
bindAddTodo（处理程序）{
this.form.addEventListener（'submit'，event=>{
event.preventDefault（）
如果（这个._todoText）{
处理程序（此.\u todoText）
这是。_resetInput（）
}
})
}
bindDeleteTodo（处理程序）{
this.todoList.addEventListener（'click'，event=>{
如果（event.target.className=='delete'）{
const id=parseInt（event.target.parentElement.id）
处理程序（id）
}
})
}
bindToggleTodo（处理程序）{
this.todoList.addEventListener（'change'，event=>{
如果（event.target.type==='复选框'）{
const id=parseInt（event.target.parentElement.id）
处理程序（id）
}
})
}
}
类控制器{
构造函数（模型、视图）{
this.model=model
this.view=视图
this.model.bindTodoListChanged（this.onToDoListChanged）
this.view.bindAddTodo（this.handleAddTodo）
this.view.bindDeleteTodo（this.handleDeleteTodo）
this.view.bindToggleTodo（this.handletoggleto）
this.onToDoListChanged（this.model.todos）
}
onToDoListChanged=todos=>{
this.view.displayTodos（todos）
}
HandleadToDo=todoText=>{
this.model.addTodo（todoText）
}
//HandleEditodo=（id，updatedText）=>{
//this.model.editTodo（id，updateText）
// }
handleDeleteTodo=id=>{
this.model.deleteTodo（id）
}
handleToggleTodo=id=>{
this.model.toggleTodo（id）
}
}
const app=新控制器（新模型（），新视图（））
*，
*：：之前，
*：：之后{
框大小：边框框
}
html{
字体系列：无衬线；
字号：1rem；
颜色：#444；
}
#根{
最大宽度：450像素；
保证金：2rem自动；
填充：0 1rem；
}
形式{
显示器：flex；
边缘底部：2rem；
}
[type=“text”]，
钮扣{
显示：内联块；
-webkit外观：无；
填充：.5rem1rem；
字号：1rem；
边框：2个实心#ccc；
边界半径：4px；
}
钮扣{
光标：指针；
背景：#007bff；
颜色：白色