javascript - 'for each' 没有在 PUG 中打印出列表 - 请解释一下？

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

索引.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: unexpected token: identifier

Answer 1

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

只需取 script.标记出来，您的模板中只需要这个:

each list in listItems 
  li= list

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

您发布的代码将输出:

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

当然，您的浏览器无法理解 pug 代码，该文本作为 JavaScript 是无效的。

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

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

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

ul
  each list in listItems 
    li= list

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

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

!{} sequence 输出一个无缓冲的代码表达式。 stringify 将在服务器上呈现为有效的 JavaScript 值，并将测试 listItems 的值，因为它出现在哈巴狗模板中。