node.js - 在pug(jade)内部动态创建元素

Question

我正在尝试在哈巴狗模板内动态创建元素。

我使用基本命令从数据库检索信息

 db.component.findAll().then(function(component){
    res.render('stock' ,{ table:component})
  })

应该创建内容的模板是

  .tbl-content
    table(cellpadding='0', cellspacing='0', border='0')
      tbody
       - row in table
            tr
                td= "#{row.name}"
                td= "#{row.storage}"

我检查了语法，应该是正确的，但结果完全错误。它将 row in table 作为字符串，例如内容并将其显示在页面上，与 "#{row.name}" 和 "#{row.storage} 相同“

我使用了一些过时的语法还是我的方法完全错误？

谢谢!

Answer 1

如果您使用 Node.js 的默认 pug 模板引擎，您使用的语法似乎是错误的

您可以通过以下方式使其工作:

.tbl-content
    table(cellpadding='0', cellspacing='0', border='0')
      tbody
       each row in table
            tr
                td= row.name
                td= row.storage

文档中有更详细的解释: https://pugjs.org/language/iteration.html

我成功测试的完整简单 Node.js 测试文件是:

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

var component = [
    {name:'myName', storage:'myStorage'},
    {name:'myName2', storage:'myStorage2'}
];
app.get('/table', function (req, res) {
    res.render('stock' ,{ table:component});
});

app.listen(3000);

它会产生响应:

<div class="tbl-content">
 <table cellpadding="0" cellspacing="0" border="0">
  <tbody>
   <tr><td>myName</td><td>myStorage</td></tr>
   <tr><td>myName2</td><td>myStorage2</td></tr>
  </tbody>
 </table>
</div>