Onsen UI. Списки

1. Onsen UI. Списки

Федорищев Л.А.

2. Цель

Сегодня поработаем со списками. Сделаем
добавление и удаление элемента; поиск, сортировку.

3. Подготовка

Переделайте вашу программу из Практики1:
Уберите страницу «Логин-пароль»
Уберите таббар «Зал» - «Спальня»
Оставьте страницу «Дом» со списком из страницы
«Зал»
Переименуйте страницу «Дом» в «Мебель»
В результате должна получиться страница как на
данном слайде.

4. Кнопка

Расположите внизу списка мебели кнопку
«Добавить»

5. Id для списка

Добавьте идентификатор id в список мебели,
как показано на слайде.

6. Добавление нового элемента

Сделайте обработку кнопки «Добавить», как показано
на данном слайде. В результате при нажатии на эту
кнопку в список должен добавляться новый элемент.

7. Страница нового элемента

Сделайте новую страницу для создания нового
элемента мебели, как показано на слайде. Страница
должна содержать заголовок «Новый элемент», кнопку
назад в виде стрелки, 3 поля ввода – название, описание и
цена элемента, и кнопку «Готово».
Измените обработчик кнопки «Добавить» так,
чтобы вместо добавления нового элемента осуществлялся
переход на нашу новую страницу «Новый элемент».

8. Создание нового элемента

Сделайте обработчик кнопки «Готово», чтобы
при нажатии на эту кнопку в список мебели
добавлялся новый раскрываемый элемент с
параметрами, введенными на странице «Новый
элемент», как показано на слайде.

9. Мусорные ведерки

Обновите элементы списка так, чтобы справа
у каждого элемента списка появилась иконка
мусорного ведерка, как показано на слайде.

10. Удаление элемента

Добавьте обработчик нажатия onclick на каждое
мусорное ведерко. Для удаления элемента
воспользуйтесь функцией remove(), как показано на
слайде.

11. Поиск

Добавьте перед списком мебели поле ввода
«Поиск». Добавьте этому элементу
обработчик события oninput.

12. Все элементы списка

В обработчике события oninput получите все
элементы списка с помощью querySelectorAll, как
показано на слайде.
Выведите в консоль содержимое всех этих элементов
с помощью свойства innerText у каждого элемента.

13. Поиск: реализация

Допишите в обработчике oninput функцию поиска по подстроке так,
чтобы в списке оставались только соответствующие поиску элементы.
Подсказка. Для скрытия/отображения элементов списка можно
воспользоваться свойством display:
item.style.display = "none";
item.style.display = "";
Для поиска по подстроке можно воспользоваться функцией indexOf

14. Сортировка

Добавьте функции сортировки элементов списка по алфавиту и по
цене (нужные кнопки разместите справа от поиска как на слайде).
Для иконок кнопок сортировки воспользуйтесь такими:
<ons-icon icon="md-sort-asc">
<ons-icon icon="md-sort-amount-asc">