在Jade / Pug中应用属性的嵌套对象 [英] Applying nested object of attributes in Jade/Pug
问题描述
有没有办法将data / aria属性的对象传递给元素?
Is there a way to pass an object of data/aria attributes to an element?
我试过:
div(data={foo:'bar'})
div(data={foo='bar'})
div&attributes({aria:{foo:'bar'}})
但是这些都不会输出所需的属性表示法。第一个和第三个位置是基础数据/ aria属性中的对象文字。第二个是语法错误。
But none of these output the desired attribute notation. The first and third place an object literal in the base data/aria attribute. The second is a syntax error.
我能找到这项工作的唯一方法是:
The only ways that I can find that work are:
div(data-foo='bar')
div&attributes({'aria-foo':'bar'})
推荐答案
引导新行减去 -
您可以在JADE / PUG中编写常规JavaScript。这为你提供了一个强大的武器来解决几乎所有问题。
By leading new lines with a minus -
you are able to write regular JavaScript in JADE / PUG. This gives you a powerfull weapon to resolve almost everything.
只需抓住一个常规对象,如 var attributes = {'foo':'bar', 'bar':'foo'}
并使用您想要的前缀为每个循环扩展它的键。
Just grab an regular object like var attributes = {'foo':'bar', 'bar':'foo'}
and extend the keys of it in a for each loop with your desired prefix.
这是一支工作笔 http:// codepen .io / pure180 / pen / kXwqdA 和
这可能是您的代码:
Here is a working Pen http://codepen.io/pure180/pen/kXwqdA and this could be your code:
- var attributes = {'foo':'bar', 'bar':'baz'}
- var ariaAttributes = {}
- for (attr in attributes) {
- var key = 'aria-' + attr
- ariaAttributes[key] = attributes[attr]
- }
div&attributes(ariaAttributes) Test
您还可以将它用作全局混合,这里是Pen http://codepen.io/pure180/pen/KrqYpB 它看起来像这样:
You can also use it as an global mixin, here is the Pen http://codepen.io/pure180/pen/KrqYpB and it can looks then like this:
mixin setAriaAttr(object)
- var attributes = object
- var ariaAttributes = {}
- for (attr in attributes) {
- var key = 'aria-' + attr
- ariaAttributes[key] = attributes[attr]
- }
div&attributes(ariaAttributes) Test
- var aria = {'foo':'bar', 'bar':'baz'}
+setAriaAttr(aria)
这篇关于在Jade / Pug中应用属性的嵌套对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!