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:20. |