在Jade / Pug中应用属性的嵌套对象

时间:2016-07-05 20:45:08

标签: javascript node.js pug

有没有办法将data / aria属性的对象传递给元素?

我试过了:

div(data={foo:'bar'})

div(data={foo='bar'})

div&attributes({aria:{foo:'bar'}})

但是这些都没有输出所需的属性表示法。第一个和第三个位置是基础数据/ aria属性中的对象文字。第二个是语法错误。

我能找到这项工作的唯一方法是:

div(data-foo='bar')

div&attributes({'aria-foo':'bar'})

1 个答案:

答案 0 :(得分:4)

通过引导带有减号-的新行,您可以在JADE / PUG中编写常规JavaScript。这为你解决几乎所有问题提供了强大的武器。

只需抓住var attributes = {'foo':'bar', 'bar':'foo'}这样的常规对象,然后使用所需的前缀在每个循环中扩展它的键。

这是一支工作笔http://codepen.io/pure180/pen/kXwqdA和 这可能是你的代码:

- var attributes = {'foo':'bar', 'bar':'baz'}
- var ariaAttributes = {}
- for (attr in attributes) {
-     var key = 'aria-' + attr
-     ariaAttributes[key] = attributes[attr]
- }

div&attributes(ariaAttributes) Test

你也可以将它用作全局mixin,这是Pen http://codepen.io/pure180/pen/KrqYpB,它看起来像这样:

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)