Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2020, 20:17
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 13

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();
})();
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2020, 20:54
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,001

Сообщение от seven8959
Этот список который добавляется в массив, всегда сохраняется, а нужно, что бы при нажатии на RETURN, он обнулялся.
Ну и обнуляйте его при нажатии. Кто мешает.
Для красоты введите метод в Model

clearTasks () {
    this.tasks = []
}


И вызывайте его в методе returnData

returnData = () => { //8
let returnPage = this.view.returnTasks();
this.view.returnTasks();
this.model.clearTasks();
}
Ответить с цитированием
  #3 (permalink)  
Старый 01.12.2020, 23:39
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 13

voraa,
Спасибо, но оно и без этого так же работает. Дело в том, что все введенные данные сохраняются всегда. После нажатия кнопки RETURN, всегда сохраняются прошлые значения ввода. Выходит как. Я ввел в инпут, какое то слово. нажала ADD, оно сохранилось в массив, после нажал SHOW, оно его отобразило. Когда нажимаю RETURN вроде все обновилось. Но когда я введу в инпут еще что то, и нажму SHOW, то покажет первый ввод и второй и т.д. А нужно, что бы предыдущие вводы удалялись.
Ответить с цитированием
  #4 (permalink)  
Старый 02.12.2020, 07:56
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,001

В View еще надо очищать taskList.
В returnTasks() вставьте

this.taskList.innerHTML = '';
Ответить с цитированием
  #5 (permalink)  
Старый 02.12.2020, 13:23
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 13

voraa,
Да, вот так вот все работает. Спасибо большое.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подгружать страницы без перезагрузки на чистом js с прогрессом? nastya97core Общие вопросы Javascript 9 16.07.2020 13:33
NodeJS обновление содержимого без перезагрузки страницы chitata Node.JS 1 24.04.2020 22:26
при отображени страницы без перезагрузки не все срабатывает Евгений d Элементы интерфейса 4 26.03.2020 07:29
Изменить урл без перезагрузки страницы при выборе input type="radio" max1985 Общие вопросы Javascript 2 09.10.2019 09:05
Обновления изображения без перезагрузки страницы A.N.R.I jQuery 13 12.03.2018 21:18