Для новачків 2
Продовжуємо наше швидке вивчення бібліотеки Backbone. Ми хотіли дізнатися, як реалізувати створення, читання, оновлення та видалення для моделей!
Створення моделей
Ми вже вміємо створювати список елементів з консолі, а також з інтерфейсу користувача (2.4.3), так що будемо вважати, що цьому ми вже навчилися.
Оновлення моделей
Що робити, якщо ви зробили помилку в слові і хочете змінити текст зі списку справ? Крім того, ви можете помітити, що чекбокси не зберігають свого стану під час перезавантаження сторінки. Давайте виправимо обидві ці проблеми.
Ви хочете відповісти на подію, що з'являється у вікні з текстом, який може бути виправлений користувачем по подвійному кліку. Для цього, по-перше, давайте додамо наступний HTML-код шаблону item-template під тегом label.
Якщо ви оновите сторінку, ви помітите, що обидва вони відображаються одночасно. Таким чином, ви можете приховувати їх за допомогою наступного CSS:
Далі нам потрібно додати події до класу TodoView щоб реагувати на зміни.
Видалення моделей
Щоб мати можливість видаляти елементи списку, ми повинні додати кнопку видалення в кожний елемент і слухати подію натискання на ньому, який викличе функцію destroy() (знищити) у вибраному об'єкті Todo.
Вставте розмітку HTML для кнопки Видалити.
Додати прослуховуйте подію клацання по кнопці, яку щойно створили.
Додати метод destroy в TodoView для видалення моделі.
Ви можете побачити результат нашої роботи тут. Введіть текст у полі введення та натисніть клавішу ENTER. О боже, ми запровадили щось нечитальне. Потрібно терміново виправляти. Клацніть швидко двічі за введеним словом і виправте його нащось осмислене.
Маршрутизація за допомогою Backbone.Router
Маршрутизація здебільшого JS досягається за допомогою Хештегов. Наприклад, якщо ви поглянете на URL Gmail, ви побачите щось на кшталт:
Тут #inbox/139c0d48e11d986b це хештег, який посилається деяке місце розташування.
У Backbone маршрути – це хеш-карти, які порівнюють посилання з функціями. Ви можете використовувати частини таких параметрів, як todos/:id , або за допомогою знака * (файл/*шлях) ви зіставите всі параметри знаків. Для цього параметри символів повинні завжди порівнюватися в кінці.
У нашому додатку ми будемо використовувати маршрути для фільтрації завдань, які вже зроблені і які виконати ще потрібно. Отже, давайте ініціалізуємо наші маршрути:
Тепер необхідно ініціалізувати його, додавши ці рядки:
Ви можете переконатися, що ваш маршрутизатор працює просто набравши #anything/that/you/want і побачивши параметр консолі браузера. Поговоримо тепер про опрацювання маршрутів.
Перед рендерингом списку об'єктів потрібно перевірити параметри, щоб показувати лише невиконані, виконані чи всі завдання. Це показано на фрагменті коду нижче:
При спробі додати #/pending або #/completed в кінці URL ви отримаєте повідомлення про помилку! Це хороший знак, який говорить нам про те, що маршрути працюють, але ми ще не виконали app.todoList.remaining() та app.todoList.completed() . Виконайте наступне: