我正在尝试使用条件(如果在外部.json中存在对象),但是帕格不能识别它。
所以,我的json文件是这样的:
{
"portfolioItems": [object1: {
objectA { ...
},
objectB { ...
},
"buttons": [{
key: value
}, {
key: value
}]
}, object2: {
objectA { ...
},
objectB { ...
}], object3: {
objectA { ...
},
objectB { ...
}
}
}
}
基本上,我需要为“对象1”(按钮)创建一个额外的div。
mixin portfolio(css, image, title, description)
div(class= "item " + css)
.wrap-img
img(src= assets + "img/home/" + image)&attributes(attributes)
.wrap-text
h3= title
p= description
if home.portfolioItems.buttons
div.buttons
each val in home.portfolioItems.buttons
a(href= val.link, target="_blank")
img(class= val.className, src= assets + "img/stores/" + val.image)
div.portfolio--items
- var projects = home.portfolioItems;
each item in projects
+portfolio(item.class, item.image, item.title[lang], item.description[lang])(alt= item.title[lang], title=item.title[lang])
帕格可以访问“home.portfolioItems.buttons”,但它不能在mixin中进行条件化吗?因为我可以在外面运行它(但我不想要它)。
提前致谢。对不起英文错误。 ;)
答案 0 :(得分:1)
Mixin具有自己的作用域,因此您需要将它们传递给对象。我还建议使用一个选项对象,该对象比跟踪单独的参数要容易得多,它与顺序无关,并且可读性也很强。
请注意,您可以调用mixin并用定义跨越多行
+portfolio({
"css": "css",
"image": "image",
"title": "title",
"description": "description",
"items": portfolioItems
})
这是mixin的样子:
mixin portfolio(options)
div(class= "item " + options.css)
.wrap-img
img(src= assets + "img/home/" + options.image)&attributes(options.attributes)
.wrap-text
h3= options.title
p= options.description
if options.items.buttons
div.buttons
each val in options.items.buttons
a(href= val.link, target="_blank")
img(class= val.className, src= assets + "img/stores/" + val.image)
您还可以避免传递所有项目并传递按钮,或者如果PortfolioItems中不存在按钮属性,则传递一个空数组:
+portfolio({
"css": "css",
"image": "image",
"title": "title",
"description": "description",
"buttons": portfolioItems.buttons || []
})
这可以避免进行条件测试,因为可以确保在mixin中至少有一个空数组:
mixin portfolio(options)
div(class= "item " + options.css)
.wrap-img
img(src= assets + "img/home/" + options.image)&attributes(options.attributes)
.wrap-text
h3= options.title
p= options.description
div.buttons
each val in options.buttons
a(href= val.link, target="_blank")
img(class= val.className, src= assets + "img/stores/" + val.image)