Question

我有一个带有以下代码的index.js：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index',{
      "title":"Homepage",
      "navIndex":"reg",
      "navItems":[
         {"title":"Home", "link":"/" },
         {"title":"Register", "link":"/reg"}
      ]
  });
});

module.exports = router;

我有index.pug：

doctype html
html
    head
        title Welcome!
        link(rel='stylesheet' href='css/materialize.min.css')
        link(rel='stylesheet' href='css/style.css')
        script(src='js/jquery-3.2.1.min.js')
        script(src='js/materialize.min.js')
    body
        block content
        nav
            div(class='nav-wrapper')
                a(href='#' class='brand-logo' class='right') Logo
                ul(id='nav-mobile' class='left hide-on-med-and-down')
                -
                    var navItems = #{navItems}

                    for(x = 0; x < navItems.length; x++)
                        li
                            a(href=navItems[x].link) navItems[x].title

出于某种原因，我不断收到“意外的阻止内容”错误。

我已经尝试调整我的间距，我似乎无法让它工作。我查看了有关无缓冲代码的文档，但我只是不确定如何将navItems对象从index.js传递到pug文件的无缓冲代码部分。我假设您定义了一个像我之前做的变量。var navItems = #{navItems}。有没有关于此的具体文件？如果没有，我到底做错了什么？准确地提前谢谢。

编辑：

更新后的index.pug如下。但它输出“navItems [x] .title”逐字，而不是变量的值。

doctype html
html
    head
        title Welcome!
        link(rel='stylesheet' href='css/materialize.min.css')
        link(rel='stylesheet' href='css/style.css')
        script(src='js/jquery-3.2.1.min.js')
        script(src='js/materialize.min.js')
    body
        nav
            div(class='nav-wrapper')
                a(href='#' class='brand-logo' class='right') Logo
                ul(id='nav-mobile' class='left hide-on-small-only')
                    - for(x = 0; x < navItems.length; x++)
                    li
                        a(href=navItems[x].link) navItems[x].title

Answer 1

您的block文件中有一个index.pug声明，表明此文件通常是由其他模板继承的，这些模板将为您提供block content的内容。< / p>

我认为从block content删除index.pug语句可以解决您的错误。或者，您可以为block content提供默认内容。

你可以read more here about Template Inheritance in Pug。

关于更新后的代码，我认为#{variableName}语法仅适用于属性（即在属性插值中）。

当用作内容的一部分时，您可以使用以下任一方法：

a(href=navItems[x].link)= navItems[x].title
a(href=navItems[x].link) #{navItems[x].title}

现在，关于for循环缩进的差异，如果你正在使用Pug循环，即在开始时没有短划线（ - ），则需要适当的缩进。

当您在行的开头添加短划线（ - ）时，此行被视为纯javascript，然后在大多数情况下您不需要缩进下一行。

如何将Express.js变量传递给Jade / Pug无缓冲代码？

1 个答案: