尝试在 Pug 中迭代 JSON 但不断收到长度错误

Question

我正在使用 express 和 pug。

这里是 index.js 文件：

app.get('/', function(req, res) {
    var bookStore = [
        {
            title: "Templating with Pug",
            author: "Winston Smith",
            pages: 143,
            year: 2017
        },
        {
            title: "Node.js will help",
            author: "Guy Fake",
            pages: 879,
            year: 2015
        }
    ];
    res.render("index", {
        bookStore: bookStore
    });
});

这里是哈巴狗模板：

each book in bookStore
    ul
        li= book.title
        li= book.author
        li= book.pages
        li= book.year

每次我尝试使用 pug cli 翻译 index.pug 文件时，我都会收到此错误：

TypeError: index.pug:1
  > 1| each book in bookStore
    2|     ul
    3|         li= book.title
    4|         li= book.author

Cannot read property 'length' of undefined
    at eval (eval at wrap (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:6:32)
    at eval (eval at wrap (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:53:4)
    at template (eval at wrap (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:54:3)
    at renderFile (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\index.js:285:40)
    at C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\index.js:149:5
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\index.js:148:9)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32) {
  path: 'index.pug'
}

起初我对自己的代码没有信心。但这是一个据说可行的例子： https://pug.programmingpedia.net/en/tutorial/9545/iteration-with-pug

我做错了什么，似乎因为 pug cli 不“知道” bookStore 变量它不会编译......但这不是模板的原则吗？ 我错过了一些声明吗？

Answer 1

您需要使用 express 来执行 Getting started with pug 提到的操作，而不是 cli。

首先，运行npm install express pug安装包。

其次，使用以下代码设置您的 server.js。

// server.js
const express = require('express')
const app = express()

// setup template you want to use.
app.set("view engine", "pug")

app.get('/', function (req, res) {
  res.render('index', {test: [1,2,3]})
})

app.listen(8080)

第三，将 index.pug 设置为“views/index.pug”，内容如下。

div
    each val in test
        ul
            li= val

现在您的文件夹结构将如下所示。

|-- node_modules
|-- server.js
|-- views
|----|---index.pug

第四，通过node server.js启动你的服务器。

最后，在浏览器中输入http://localhost:8080 url，你会看到结果。

Answer 2

好吧，我明白了：当您使用数组编译 .pug 文件时，您必须使用 -O 选项来指定一些变量： pug -O '{"bookStore": "test"}' index.pug 有效，但是： pug index.pug 不工作。

我觉得这有点奇怪。