2013-06-09 9 views
5

Come posso rendere più file .ejs in forma annidata?Come eseguire il rendering di più file .js in formato nidificato in Node.js ed Express?

Così ho un file seguente:

var mysql = require('mysql'); 
var ejs = require('ejs'); 
exports.index = function(req, res){ 
    if (req.method=='POST'){ 
     var connection = mysql.createConnection({user:'root', password:'root', database:'testdb'}); 
     var name = req.param('name'); 
     connection.query('select * from table_name where name = ?', name, function(err, rows, fields){ 
      if(err) throw err; 
      res.render('index', { 
       title: 'title', content: res.render('index2', {data:rows}) 
      }); 
     }); 
    } 
}); 

Dove index.ejs compone di tag molto semplice html (dicono html, la testa, il corpo, e uno p tag) e hanno <%- content %> in essa, in cui i contenuti si presume che essere reso da un altro file .js, che non include il tag html, head o body e si presume che sia reso solo un contenuto e un titolo. Tuttavia, quando ho avuto accesso a questo file tramite la richiesta POST e ho provato a eseguire il rendering dei file e ho estratto il file HTML emesso dal mio browser, il contenuto era costituito solo dal file index2.ejs, che significa che non ha tag HTML, corpo, testa.

Quindi cosa mi manca? E se voglio includere una libreria javascript per <script src='some_file.js'></script>, dovrei aggiungere un'altra proprietà di rendering quando provo a eseguire il rendering nel file index2.ejs ... giusto?

Grazie.

risposta

9

In primo luogo, credo che siete confusi su come res.render opera. Secondo il docs:

res.render (vista, [locali], callback)

Render una vista con un callback risponde con la stringa rendering.

che spiega perché si sta visualizzando il contenuto di index2.js nella pagina HTML.


Ora, ci sono diversi modi per raggiungere il tuo obiettivo, ovvero nidificare le viste all'interno delle viste. A partire da Express 3.x, è necessario utilizzare include. In questo caso, è possibile riscrivere le visualizzazioni in questo modo:
1- Definire un file header.ejs, che sarebbe simile a questo example.
2- Definire un footer.ejs. quale sembrerebbe questo altro example.
3- Nei tuoi index2.ejs, includere questi due file, come questo:

<% include header %> 
    //The HTML of your index2.ejs 
    //You can add some reusable views, like, say, a submit button above the footer 
    <% include reusable_views/submit %> 
<% include footer %> 

Un secondo metodo è quello di utilizzare ejs-locals, che permette di inserire qualsiasi vista specificando solo il loro percorso:

res.render('index', { 
       title: 'title', 
       content: 'index2', 
       data:rows 
      }); 

E, nei vostri index1.ejs, si avrà:

<html><head> 
<title><%= title %></title></head> 
<body><p> 
<%- partial('index2',{}) %> 
</p></body></html> 

Il vantaggio di questo metodo è che si può passare i valori in più per la vista, noi ing l'oggetto extra. Controlla la pagina github di ejs-locals per maggiori dettagli.

1

bene per lo standard HTML come head, footer, sidebars o qualsiasi altra cosa .. c'è Partials l'esempio spiega tutto ..