Question

我试图遍历

传递的数组

res.render('index', { 'listItems': list_items });

哈巴狗

  div#toDoList
    .col-1
      h2#user_name_heading=userName
      h2#user_date_signup_heading=userDate
      h2 Today's To-do List
      form#toDoList_form(method="POST" action="/")
        input(type='text' id="list_item" name='list_item' autofocus required placeholder="task")
        button(type='submit') ADD
    div.col-2
      .toDoListWrap
        ul
          script.
            each list in listItems 
              li=list

index.js

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

let users = [];
let list_items = ['jajajajaa'];



function addNewUser(data) {
  try {
    users.push(
      {
        "fname":data.fname,
        "list_name": data.list_name,
        "list_date": data.list_date
      }  
    );  
  } catch(e) {
    console.log("Failed to add user ", e);
      throw e;
  }

}


/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  // check post valued are true
  if(req.body.fname && req.body.list_name && req.body.list_date) {
    try {
       addNewUser(req.body);
       console.log(res.headersSent);
       res.json({
         "message":"Successfully signed up!",
         "userName": req.body.fname,
         "userDate": req.body.list_date
        });
    } catch(e){
     // signup failed
      res.json(res.status(status).json(obj), "Sign up failed...");
    }
   }

   if(req.body.user && req.body.list_item) {
    list_items.push(req.body.list_item);
    console.log(list_items);

    // res.json({ "list_items":list_items});
    res.render('index', { 'listItems': list_items });
   }
});

module.exports = router;

console.log在index.js中显示以下内容，证明list_items中包含元素：

[ 'jajajajaa', 'f,ksha' ]

浏览器记录以下错误：

SyntaxError：意外令牌：标识符

Answer 1

您的问题是script.标记。这告诉pug在页面中输出<script></script>标签，然后在其下方输出原始内容。

只需取出script.标记，模板中只需要这样做：

each list in listItems 
  li= list

这将按预期循环，并为listItems中的每个条目创建<li>元素。

您发布的代码将输出以下内容：

<script>
  each list in listItems 
    li=list
</script>

当然，您的浏览器无法理解哈巴狗代码，因为该文本作为JavaScript无效。

我了解通过解决此问题，您会遇到新的错误。

Here is a codepen复制了您的模板，对我来说效果很好。这是哈巴狗代码：

- var listItems = [ 'jajajajaa', 'f,ksha' ];

ul
  each list in listItems 
    li= list

现在让我们使用script标记来解决此次要问题。将此代码添加到模板中，以便将listItems的值输出到浏览器控制台：

script.
  console.log(!{JSON.stringify(listItems)});

!{}序列输出一个未缓冲的代码表达式。字符串化将在服务器上呈现为有效的JavaScript值，并将测试pug模板中显示的listItems的值。

“为每个”未在PUG中打印出列表-请解释一下？

1 个答案: