Рендеринг меню как частичного просмотра Jade в Express - PullRequest
Новая
       14

Рендеринг меню как частичного просмотра Jade в Express

2 голосов
/ 08 января 2012

У меня проблемы с концепцией отображения меню с активными состояниями в приложении Express с использованием Jade Partial View.

У меня что-то вроде этого: 

ul.menu
  li
    a(href='/some/route').active
  li
    a(href='/another/route')

Что бы яНапример, класс .active должен быть применен к текущему маршруту, поэтому мой CSS может отображать активное состояние пользовательского интерфейса.

Когда я писал в PHP, это было бы выполнено через некоторую сложную цепочку if/else, заявления, но я предполагаю, что есть более элегантный подход.Чего мне не хватает?

Ответы [ 2 ]

8 голосов
/ 21 января 2013

Мое решение похоже на решение Данмакту, но я думаю, что немного более аккуратно.

Я использую промежуточное ПО для сохранения URL-адреса как локальной переменной во всех запросах. Убедитесь, что это происходит раньше ваших маршрутов. 

app.use(function(req, res, next) {
  res.locals.url = req.url;
  next();
});

Мой шаблон Jade для меню выглядит так 

ul
  each link in links
    li
      a(href=link.url, class=link.url === url && 'active')= link.name
3 голосов
/ 08 января 2012

Джейд не знает о маршруте. Я не думаю, что есть какой-либо способ избежать if / else в той или иной форме.

В Express, просто пройдите маршрут как местный: 

res.render('my_view', {
  current: 'current/url'
});

И в представлении, иметь массив ссылок меню и сделать что-то вроде: 

ul.menu
  for each item in links
    li
      if (item.url == current)
         a(href=item.url).active
      else
         a(href=item.url)
...