Question

请帮助我解决以下问题：

我尝试将一组对象传递给 pug。

数组定义为：

...
let subDirs=[
  { name: 'subDir1', files: [ 'static/subDir1/file1.jpg' ] },
  { name: 'subDir2', files: [ 'static/subDir2/file1.jpg' ] },
  { name: 'subDir3', files: [ 'static/subDir3/file1.jpg' ] }
]
...

Express 渲染对象数组：

...
res.render('index', { title: 'title', subDirs: subDirs })
...

在 pug 文件中，我尝试使用以下几行访问数组中的对象：

...
doctype html
html(lang='en')
  head
    title title
    meta(charset='utf-8')
    meta(name='viewport' content='width=device-width, initial-scale=1')
    link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js')
  body
    .container
      h2 List
      ul.list-group
        each subDir in subDirs
          li.list-group-item p subDir.name
...

列表一次又一次地显示字符串“subDir.name”... :(

我很难抓住重点。

请帮忙。

提前感谢您的帮助。

问候

安德烈亚斯

Answer 1

根据 Pug documentation 为了评估 subDir，您似乎需要将其包装在 #{} 中

我以前没有使用过 Pug，所以这只是粗略地浏览一下文档，但如果你改变了

li.list-group-item p subDir.name

到

li.list-group-item p #{subDir.name}

我相信它应该按预期呈现

Answer 2

您需要使用 interpolation 来呈现 name 属性的值。如果您想将其包装在一个段落中，您还需要确保缩进（或使用内联 tag interpolation）。

这些都是有效的方法：

// string interpolation
each subDir in subDirs
  li.list-group-item
    p #{subDir.name}

// using equals
each subDir in subDirs
  li.list-group-item
    p= subDir.name

// tag interpolation and string interpolation
each subDir in subDirs
  li.list-group-item #[p #{subDir.name}]

// tag interpolation and using equals
each subDir in subDirs
  li.list-group-item #[p= subDir.name]

就我个人而言，在大多数情况下我更喜欢前两个——但它们都是等价的。

Answer 3

感谢您的快速帮助。现在可以使用了。

我曾经希望不要问可以通过阅读文档来解决的问题。对不起。

再次感谢您的帮助。

问候

安德烈亚斯

新手：将对象数组快速传递给哈巴狗

3 个答案: