在 pug(jade) 中动态创建元素

【问题标题】：Dynamicly creating elements inside pug(jade)在 pug(jade) 中动态创建元素
【发布时间】：2016-09-16 02:40:02
【问题描述】：

我正在尝试在 pug 模板中动态创建元素。

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

 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}" 相同

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

谢谢！

【问题讨论】：

标签： node.js express pug

【解决方案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>

【讨论】：