时间戳

首页 > 解决方案 > 用于链接 JavaScript 文件的 Pug 字符串插值

javascript - 用于链接 JavaScript 文件的 Pug 字符串插值

问题描述

我想做的事

我有一个 NodeJS 网络服务器，它使用Express和Pug提供 HTML 和 JavaScript 文件。它看起来像这样：

指数.pug

html
    head
        title Hello
    body
        h1 Hello World!
        script(src='script.js')

应用程序.js

const express = require('express');
var app = express();
app.set('view engine', 'pug');

app.get("/", (req, res) => {
    res.render("index", {
        age: 91,
        name: 'George P. Burdell'
    });
});
app.listen(8080);

脚本.js

var person = {
    age: #{age},
    name: #{name}
};

（取自并添加到GitHub 示例）

我希望能够将#{age}and#{name}占位符与函数中指示的值res.render()（即{age: 91, name: 'George P. Burdell'}）交换。

问题

截至目前，这些值没有交换，并且控制台会吐出一个错误，指示带有占位符的行#{age}并且#{name}无法识别。仅当script.js中的 JavaScript 代码作为内部脚本引入 .pug 文件时，才会交换占位符值，如下所示：

指数.pug

html
    head
        title Hello
    body
        h1 Hello World!
        script.
            var person = {
                age: #{age},
                name: #{name}
            };

但我想要做的是直接从外部脚本文件中交换值，例如在初始设置中。除了在 .pug 文件中“活动”代码之外，我没有找到一种简单的方法来做到这一点。

标签： javascriptnode.jsexpresspug

解决方案

所以我有一个解决方法。您可以做的是在 .pug 文件的内部脚本标记中设置全局变量，然后可以使用 pug 对其进行插值。作为视觉，这就是我的意思：

指数.pug

html
    head
        title Hello
    body
        h1 Hello World!
        script.
            var age = #{age};
            var name = #{name};
        script(src='script.js')

脚本.js

var person = {
    age: age, // the age variable from the internal script is used
    name: name // the name variable from the internal script is used
};

app.js保持不变！

编辑

应用程序.js

res.render("index", {
    age: 91,
    name: 'George P. Burdell'
});

应该

res.render("index", {
    age: "91",
    name: "'George P. Burdell'"
});

交换后保持数据类型！

请让我知道是否有更好的方法来解决这个问题！目前，这是公认的答案。

推荐阅读