M
M
Maxim Gatilin2015-01-17 16:51:14
Node.js
Maxim Gatilin, 2015-01-17 16:51:14

How to make jade mixin for menu with sub items?

You need to make a minsin so that it is generated in this markup

  • 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 the question

In order to leave comments, you need to log in

2 answer(s)
K
kamwork, 2015-01-17
@gatilin222

In fact, it is not very convenient due to the fact that the array needs to be lined up in one line. Maybe someone else can suggest a solution.

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

I continued to dig and with mixins it turns out more beautiful:
- 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}

And we call mixins:
+list(newsList)
+list(newsList2)

But perhaps you can somehow make it even more beautiful
------------
Added:
and
each item in menu
        +list(item)

I hope it will be useful to someone

R
riwkus, 2017-07-10
@riwkus

The array does not have to be in 1 row

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

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

As a result, the first option is shorter
each item in newsList
            li            
                a #{item.name}
                each subitem in item.sub
                    ul
                        li
                            a #{subitem}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question