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

Question

有没有办法将 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'})

Answer 1

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

只需获取一个常规对象，如 var attributes = {'foo':'bar', 'bar':'foo'} 并在 for each 循环中用你想要的扩展它的键字首。

这是一支工作笔 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

您也可以将它用作全局混合，这里是 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)