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

Applying nested object of attributes in Jade/Pug

本文关键字：嵌套 属性 对象 应用 Jade Pug      更新时间：2023-09-26

是否有方法将数据/aria属性的对象传递给元素?

我试过:

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

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

我能找到那份工作的唯一方法是:

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

通过在新行前面加上- -，您可以在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，这是钢笔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)
相关文章：