вернуться к уроку

Сделайте меню ссылками

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

Открыть решение в песочнице.