Сделайте меню ссылками
важность: 5
Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы оно выводило не просто список, а список ссылок.
-
Вместо массива
itemsменю должно принимать объектitems, вот так:var menu = new Menu({ title: "Сладости", template: _.template(document.getElementById('menu-template').innerHTML), listTemplate: _.template(document.getElementById('menu-list-template').innerHTML), items: { "donut": "Пончик", "cake": "Пирожное", "chocolate": "Шоколадка" } }); -
Вывод в шаблоне пусть будет не просто
<li>Пончик</li>, а через ссылку:<a href="#donut">Пончик</a>. При клике на ссылку должно выводиться название из еёhref.
Демо:
В решении обратим внимание:
- Чтобы ссылка
hrefбыла корректной, даже если в ключахitemsпопались русские символы и пробелы – используется функция encodeURIComponent. - Для вывода
hrefпри клике на ссылку используется делегирование. Причём обработчик не сам выводитhref, а лишь разбирается в произошедшем и вызывает функциюselect, которая представляет действие «выбора» элемента меню. В последующих примерах эта функция станет сложнее.