Question

需要将一组用户呈现给pug模板，但无法正常工作。

users.pug

*
*
*
each user in userList
   tr
      td= user.name
      td= user.address
      td= user.age
*
*
*

服务器端代码

logger.Debug(JSON.stringify(data));
res.render('users.pug', { userList:JSON.stringify(data)});

当我执行服务器端代码时，logger.Debug（）语句将生成以下内容：

[{"name":"ABC","address":"London","age":"30"}, {"name":"DEG","address":"USA","age":"25"},
{"name":"XYZ","address":"India","age":"35"}]

但是将相同的userList渲染到pug无法正常工作。它呈现空白

任何人都可以在这里提供帮助和建议解决方法。

Answer 1

这是工作版本。

我做了两件事：

在模板中添加了<table>元素（并删除了我认为是填充符的*）
将实际对象而不是字符串传递给模板

const pug = require('pug');

let template = `
table
  each user in userList
    tr
     td= user.name
     td= user.address
     td= user.age
`

const compiledFunction = pug.compile(template);
let data = [{"name":"ABC","address":"London","age":"30"}, {"name":"DEG","address":"USA","age":"25"},
{"name":"XYZ","address":"India","age":"35"}]


let html = compiledFunction({
  userList: data
});

document.getElementById('data').innerHTML = html

<script src="https://pugjs.org/js/pug.js"></script>
<div id="data"></div>

Answer 2

在服务器端，请确保已将view-engine定义为pug，并确保模板文件位于根级别的views文件夹下

示例：

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

然后尝试一下，它应该可以工作。

注意：按照Mark Meyer的注释将表添加到代码中，否则，它不会在一行中显示每个tr。确保您也有＃{}用于动态变量替换。

block content
   table  
    each user in userList
      tr.person
        td #{user.name} 
        td #{user.age}

如何将阵列从Express服务器渲染到Pug并显示

2 个答案: