请帮助我解决以下问题:
我试着把一组物体传给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