onsubmit breaks翡翠ビュー

Question

私はいくつかの入力を受け取り、データをmongoに格納し、フォームの下のビューにデータを返します。ユーザが、フォームに新しいデータを送信ヒスイビューがクラッシュし、次のエラーを表示したときただし、：

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が未定義のonsubmitになるのはなぜですか？しかし、データは依然として送信前に表示されますか？

ルータ

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 

ポスト機能

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ハンドラ内であなたがジェイドを供給していないため、エントリは再提出時に定義されていない理由は、その変数の値を持つテンプレート。で、あなたが見ることができるように

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

：router.getハンドラで成功したコードにこれを比較し、今

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

：ここ

はこれを原因とあなたのrouter.postハンドラのコードですrouter.getハンドラを使用して、変数の値をentriesとするJadeテンプレートエンジンを提供しています。これはmongodbの呼び出しによって返される値です。

詳細はthe express docs for res.render()をご覧ください。ここでsitutationにいくつかの光を当てる問題の抜粋です：あなたは間違っていたところ

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引数の定義から、あなたが見ることができます！ハッピーコーディング:)