Как сделать миксин для jade для меню с подпунктами?

Question

[Максим Гатилин]

Необходимо сделать минсин, чтобы он генерировался вот в такую разметку

• Home
  
  • Sub Home
  • Some text
  • Another text
• Sport
  
  • Sub Home
  • Some text
  • Another text
• Products
  
  • Sub Home
  • Some text
  • Another text
• 
  
  • Sub Home
  • Some text
  • Another text
  Mom

Answer 1

[kamwork]

На самом деле не сильно удобно из за того, что массив нужно выстроить в одну строку. Может кто еще подскажет решение.

- var newsList = [{name : 'Пункт 1', sub: ['Пункт 1.1', 'Пункт 1.2', 'Пункт 1.3', 'Пункт 1.4']}, {name : 'Пункт 2', sub: ['Пункт 2.1', 'Пункт 2.2', 'Пункт 2.3', 'Пункт 2.4']}]

each item in newsList
            li            
                a #{item.name}
                each subitem in item.sub
                    ul
                        li
                            a #{subitem}

Продолжил копаться и с миксинами получается красивее:

- var newsList = [{name : 'Пункт 1', sub: ['Пункт 1.1', 'Пункт 1.2', 'Пункт 1.3', 'Пункт 1.4']}] 
- var newsList2 = [{name : 'Пункт 2', sub: ['Пункт 2.1', 'Пункт 2.2', 'Пункт 2.3', 'Пункт 2.4']}]

mixin list(items)
            ul
                each item in items
                    li
                        a #{item.name}
                        each subitem in item.sub
                        ul
                            li
                                a #{subitem}

И вызываем миксины:

+list(newsList)
+list(newsList2)

Но наверное можно как то еще более красиво сделать
------------

Добавил:
- var menu = [item1, item2]
и

each item in menu
        +list(item)

Надеюсь кому то будет полезно

Comments

[Максим Гатилин]

Большое спасибо!Я все таки выстроил по 1 варианту, т.к. уже привык к длинным массивам в jade. Знайте, что одному человеку вы уже точно помогли!

[kamwork]

gatilin222: А меня вот карёбит от них :)) Надеюсь они как то доработают этот момент

[Ольга Жижка]

kamwork: Подскажите пожалуйста если не затруднит, а как быть если нужно при этом пунктам меню и ссылкам присваивать классы, как тогда миксин нужно организовать, спасибо за ответ

[Sergeniy]

В перебор подменю зря ul запихали, нужно только li выводить в одной ul.

Answer 2

[riwkus]

Массив не обязательно выстраивать в 1 строку

- 
 var newsList = [
 {name : 'Пункт 1', sub: ['Пункт 1.1', 'Пункт 1.2', 'Пункт 1.3', 'Пункт 1.4']}, 
 {name : 'Пункт 2', sub: ['Пункт 2.1', 'Пункт 2.2', 'Пункт 2.3', 'Пункт 2.4']}]

или так

- var newsList = [
- {name : 'Пункт 1', sub: ['Пункт 1.1', 'Пункт 1.2', 'Пункт 1.3', 'Пункт 1.4']}, 
- {name : 'Пункт 2', sub: ['Пункт 2.1', 'Пункт 2.2', 'Пункт 2.3', 'Пункт 2.4']}]

В итоге первый вариант короче

each item in newsList
            li            
                a #{item.name}
                each subitem in item.sub
                    ul
                        li
                            a #{subitem}