MVC для перерисовки страницы без перезагрузки
Всем добрый вечер. Нужна помощь. Есть шаблон MVС. При вводе в поле input все добавляется в массив в Model, но не отображается сразу. После того, когда кликаешь на кнопку SHOW, все удаляется и появляется список li и новая кнопка RETURN, которая при нажатии должно вернуть все как было изначально. Вроде у меня все работает, НО. Этот список который добавляется в массив, всегда сохраняется, а нужно, что бы при нажатии на RETURN, он обнулялся. Как будто произошла полная перезагрузка страницы. И вот я не пойму как очистить этот список.
Возможно вы увидите что то еще, что нужно поправить, Заранее всем спаибо. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> <script src="script/script.js"></script> </body> </html> class View { constructor() { this.input = document.createElement('input'); this.addButton = document.createElement('button'); this.addButton.style.marginLeft = '15px'; this.mainBlock = document.querySelector('#app'); this.taskList = document.createElement('ul'); this.showButton = document.createElement('button'); this.showButton.style.marginLeft = '15px'; this.returnButton = document.createElement('button'); //5 this.returnButton.style.marginLeft = '15px'; //6 } initRender() { this.mainBlock.append(this.input, this.addButton, this.showButton); //Добавить this.taskList this.addButton.innerHTML = 'ADD'; this.showButton.innerHTML = 'SHOW'; } renderTask(task) { const item = document.createElement('li'); item.innerHTML = task; this.taskList.appendChild(item); this.input.value = ''; } removeTask() { //3 this.mainBlock.append(this.returnButton, this.taskList); this.returnButton.innerHTML = 'RETURN'; //4 this.showButton.remove(); this.addButton.remove(); this.input.remove(); } returnTasks() { //7 this.returnButton.remove() this.initRender(); this.taskList.remove(); } } class Controller { constructor(model, view) { this.model = model; this.view = view; } addData = () => { let value = this.view.input.value; this.model.addTask(value); this.view.renderTask(value); } showList = () => { //2 let newPage = this.view.removeTask(); this.view.removeTask(); } returnData = () => { //8 let returnPage = this.view.returnTasks(); this.view.returnTasks(); } addHandle() { this.view.addButton.addEventListener('click', this.addData); this.view.showButton.addEventListener('click', this.showList); //1 this.view.returnButton.addEventListener('click', this.returnData); //9 } } class Model { constructor() { this.tasks = []; } addTask(value) { this.tasks.push(value); } } (function init() { const view = new View(); const model = new Model(); const controller = new Controller(model, view); view.initRender(); controller.addHandle(); })(); |
Цитата:
Для красоты введите метод в Model clearTasks () { this.tasks = [] } И вызывайте его в методе returnData returnData = () => { //8 let returnPage = this.view.returnTasks(); this.view.returnTasks(); this.model.clearTasks(); } |
voraa,
Спасибо, но оно и без этого так же работает. Дело в том, что все введенные данные сохраняются всегда. После нажатия кнопки RETURN, всегда сохраняются прошлые значения ввода. Выходит как. Я ввел в инпут, какое то слово. нажала ADD, оно сохранилось в массив, после нажал SHOW, оно его отобразило. Когда нажимаю RETURN вроде все обновилось. Но когда я введу в инпут еще что то, и нажму SHOW, то покажет первый ввод и второй и т.д. А нужно, что бы предыдущие вводы удалялись. |
В View еще надо очищать taskList.
В returnTasks() вставьте this.taskList.innerHTML = ''; |
voraa,
Да, вот так вот все работает. Спасибо большое. |
Часовой пояс GMT +3, время: 09:23. |