Rainbow Rainbow - 6 months ago 21
Node.js Question

How to Customize this mixin in JADE

I'm working on a mixin in Jade which creates divs with img tags... here is the mixin code:

mixin image(pics)
each pic in pics
.row
.col-md-4
img.img-responsive(src="#{pic.path}" alt="#{pic.name}")


and here is an example when I use the mixin:

+image([
{'name':'anti' , 'path':'/images/anti.jpg'},
{'name':'dark' , 'path':'/images/dark.jpg'},
{'name':'haik' , 'path':'/images/haik.jpg'},
{'name':'james' , 'path':'/images/james.jpg'},
{'name':'johanna' , 'path':'/images/johanna.jpg'},
{'name':'timothy' , 'path':'/images/Timothy.jpg'}
])


Is it possible to assign all this values to a variable in other file then includes the file and use the mixin? if yes, how? :D

this is the goal, I just demonstrate what I mean, obviously the code below wont work:

var allPics = [
{'name':'anti' , 'path':'/images/anti.jpg'},
{'name':'dark' , 'path':'/images/dark.jpg'},
{'name':'haik' , 'path':'/images/haik.jpg'},
{'name':'james' , 'path':'/images/james.jpg'},
{'name':'johanna' , 'path':'/images/johanna.jpg'},
{'name':'timothy' , 'path':'/images/Timothy.jpg'}
]

+image(allPics)

Answer

Yes, you can use variables in an included file as well as Mixins.

test.jade includes test_include.jade

test_include.jade:

- var allPics  = [{'name':'anti'    , 'path':'/images/anti.jpg'},{'name':'dark'    , 'path':'/images/dark.jpg'},{'name':'haik'    , 'path':'/images/haik.jpg'},{'name':'james'   , 'path':'/images/james.jpg'},{'name':'johanna' , 'path':'/images/johanna.jpg'},{'name':'timothy' , 'path':'/images/Timothy.jpg'}]
mixin image(pics)
  each pic in pics
    .row
      .col-md-4
        img.img-responsive(src="#{pic.path}" alt="#{pic.name}")
block content

test.jade:

extends test_include
  block content
   +image(allPics)