Сделайте меню ссылками
важность: 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
, которая представляет действие «выбора» элемента меню. В последующих примерах эта функция станет сложнее.