2016-07-29 101 views
0

請解釋一下,爲什麼我的代碼不起作用? 我使用快速寬度的把手,使用JQuery Ajax進行表單提交。第一個渲染工作正常,但第二個渲染沒有。我認爲問題在於嵌套'res.render'。希望對您的答案:-)我被困在使用快遞和車把的渲染模板

app.js

var express = require('express'); 
var app = express(); 
var template = require('consolidate'); 
var handlebars = require('handlebars'); 
var bodyparser = require('body-parser'); 

app.use(bodyparser.urlencoded({extended: false})); 
app.engine('hbs', template.handlebars); 
app.set('view engine', 'hbs'); 
app.set('views', __dirname); 

app.get('/', function(req, res) { 
    res.render('index', { 
    myName: 'John' 
    }); 
}); 
app.post('/', function(req, res) { 
    var obj = {surname: req.body.surname, age: req.body.age}; 
    res.render('Layout.hbs', obj, function(err, html) { 
    if(err) { 
     console.log(err); 
    } else { 
     console.log(html); 
     res.render('index.hbs', { 
     content: html 
     }) 
    } 
    } 
); 
}); 

app.listen(8080, function() { 
    console.log('App listening on 8080'); 
}); 

index.hbs

<div class="wrapper"> 
    <div class="container"> 
     <p>{{myName}}</p> 
    </div> 
    <form action="" name="form" id="form" method="post"> 
     <input id="surname" type="text" name="surname" placeholder="surname"><br/> 
     <input id="age" type="text" name="age" placeholder="age"><br/> 
     <input type="submit"> 
    </form> 
    {{{content}}} 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('form').on('submit', function(e) { 
     e.preventDefault(); 
     var form = $(this); 
     var surname = form.find('#surname').val(); 
     var age = form.find('#age').val(); 
     $.ajax({ 
      type: 'POST', 
      data: {surname: surname, age: age}, 
      success: function(res) { 
      console.log('Success'); 
      }, 
      error: function(err) { 
      console.log(err); 
      } 
     }); 
     }); 
    }); 
    </script> 

Layout.hbs

<div class="inner-container"> 
    <h1>{{surname}}</h1> 
    <h2>{{age}}</h2> 
    <p>Render</p> 
</div> 
+0

你爲什麼嵌套'res.render()'調用更換呢?內容上的一個渲染應該足夠了。 – jfriend00

+0

我需要在「索引」內渲染「佈局」模板,我如何在沒有嵌套渲染的情況下執行此操作? – Dima

+0

把手有自己的機制來嵌入主模板內的另一個模板。您需要使用該機制,而不是調用'res.render()'兩次。如果您顯示實際的模板並更詳細地解釋您要完成的任務,我們將更有可能提供幫助。 – jfriend00

回答

1

,我認爲你是對的,問題是嵌套0​​。當您撥打res.render時,它會呈現一個html並將其發送給狀態碼爲200的客戶端。

只能在根級別上調用app.render,而在路由/中間件內只能調用res.render。但請記住,res.render在內部使用app.render來呈現模板文件。我不認爲有任何需要單獨呈現模板。

希望答案可以幫助你。如果我能看到你所得到的錯誤日誌,那對我來說會更好。如果你提供,我會相應地改變我的答案。

0

我認爲與()方法結合代表團事件問題..

$('form').on('submit', function(e) { 

通過

$(document).on('submit','form', function(e)){