新手:表示将对象数组传递给pug



请帮助我解决以下问题:

我试着把一组物体传给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";一次又一次…:(

我很难抓住要点。

请帮忙。

感谢您提前提供的任何帮助。

问候

Andreas

您需要使用插值来呈现name属性的值。如果你想把它包装在一个段落中,你需要确保也缩进(或者使用内联标记插值(。

这些都是有效的方法:

// 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]

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

根据Pug文档,为了评估subDir,似乎需要将其封装在#{}

我以前没有使用过Pug,所以这只是粗略地看了一下文档,但如果你更改

li.list-group-item p subDir.name

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

我认为它应该像预期的那样呈现

感谢您的快速帮助。它现在起作用了。

我曾经希望不要问那些可以通过阅读文档来解决的问题。抱歉。

再次感谢您的帮助。

问候

Andreas

最新更新