onsubmit 中断 Jade 视图

Question

我有一个表单页面，它接受一些输入，将数据存储在 mongo 中，并将数据 returns 存储到表单下方的视图中。但是，当用户在表单上提交新数据时，jade 视图崩溃并显示以下错误：

TypeError: /Users/rhysedwards/Downloads/insightful/food/views/index.jade:29
    27|         label
    28|           input.btn.btn-default(name='submit', type='submit', onsubmit="this.submit(); this.reset(); return false;")
  > 29|       each Entry, i in entries
    30|         div.title= Entry.title
    31|         div.url= Entry.url
    32|         div.selectedDate= Entry.selectedDate

Cannot read property 'length' of undefined

预期的行为是当用户通过表单提交新数据时，它会显示在表单下方。为什么 Entry 在提交时变为未定义但数据仍然在提交之前显示？

路由器

router.get('/', function(req, res, next){
  Entry.find({}, function (err, entries) {
    res.render('index', {
      "entries": entries
    });
  });
});

翡翠

block content
  .container
    h1 London Plans
    form(method='post' action='post', class='plans', id='plans')
      .form-group
        label Do you have a link?
        input.form-control(name='search', id='search' type='url', required='required')
        h2#title
      .form-group
        label What looks cool?
        input.form-control(name='title', type='text', required='required' class='title')
      .form-group
        label When is it?
        label
          input(type='checkbox' name='week' value='week')
          span This week
        label
          input(type='checkbox' name='month' value='month')
          span This Month
        label
          input(type='checkbox' id='date')
          span Date
        label
          input(type='textbox' class='datepicker' name='date' value='')
        label
          input.btn.btn-default(name='submit', type='submit', onsubmit="this.submit(); this.reset(); return false;")
      each Entry, i in entries
        div.title= Entry.title
        div.url= Entry.url
        div.selectedDate= Entry.selectedDate

Post 函数

router.post('/post', function(req, res, next) {
  var url = req.body.search;
  var title = req.body.title;
  var week = req.body.week;
  var month = req.body.month;
  var date = req.body.date;

  console.log(url + ' ' + title + ' ' + week + ' ' + month + ' ' + date);

  //FIND WHICH DATE WAS SELECTED BY USER AND ASSIGN THAT TO selectedDate
  if (typeof week != 'undefined' ){
    var selectedDate = 'week';
  } else if (typeof month != 'undefined') {
    var selectedDate = 'month';
  } else {
    var selectedDate = date;
  };

  //CREATE NEW OBJECT
  var data = new Entry ({
    url: url,
    title: title,
    selectedDate: selectedDate
  })

  //STORE NEW OBJECT TO THE DB
  Entry.createEntry(data, function(err, entry){
    if (err) throw err;
    console.log(entry);
  })

  //RENDER THE HOMEPAGE TO CLEAR THE FORM
  res.render('index');
  return false;
});

Answer 1

重新提交时条目未定义的原因是因为在您的 router.post 处理程序中您没有为 Jade 模板提供该变量的值。

这是您的 router.post 处理程序中导致此问题的代码：

res.render('index'); // telling the page to render without variables

现在，将其与 router.get 处理程序中的成功代码进行比较：

res.render('index', {
    "entries": entries // here is where you assign variables for Jade
});

如您所见，在 router.get 处理程序中，您为 Jade 模板引擎提供了 "entries" 变量的值 entries，这是由你打给 mongodb.

的电话

可能值得查看 the express docs for res.render() 以获取更多信息。以下是有关情况的摘录：

res.render(view [, locals] [, callback])

Renders a view and sends the rendered HTML string to the client. Optional parameters:

locals, an object whose properties define local variables for the view.

从locals参数的定义就可以看出哪里错了！编码愉快:)

onsubmit 中断 Jade 视图

onsubmit breaks Jade view

javascript

mongodb

node.js

express

pug

`res.render(view [, locals] [, callback])`