javascript - onsubmit 中断 Jade View

Question

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

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 在提交时变为 undefined 但数据仍然显示在提交之前？

路由器

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

Jade

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

后置函数

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参数的定义，就可以看出哪里错了!快乐编码:)