2012-03-27 10 views
11

Así que, acabo de empezar a trabajar con flatironjs y "plates". Estoy tratando de descubrir cómo puedo tener una plantilla de diseño principal y luego una plantilla parcial que carga contenido en la plantilla de diseño principal similar a cómo lo hace expressjs ...flatiron.js/plates partial templates?

Con expressjs está el layout.js y tal vez index.js. index.js rellena el área de contenido de layout.js. Parece que esto estaría cocido. No veo una manera de hacerlo en base a la documentación.

Respuesta

16

plantilla de diseño principal (template.html):

<h1>This is the main template.</h1> 
<div id="main"></div> 

parcial (partial.html):

<p>This is the partial that should be rendered into the main template.</p> 

entonces usted puede hacer esto:

var fs = require("fs"), 
    Plates = require("plates"); 

// Read the two files from disk 

var template = fs.readFileSync("template.html", "utf-8"); 
var partial = fs.readFileSync("partial.html", "utf-8"); 

// Render the partial into main. 
// The data-key in the second param is matched to the id in the template. 
// Plates renders the corresponding value - in this case the contents of 
// partial.html - between the start and end tags with this id. 

var rendered = Plates.bind(template, {main: partial}); 

Así console.log(rendered) debe darle:

<h1>This is the main template.</h1> 
<div id="main"> 
    <p>This is the partial that should be rendered into the main template. 
</p> 

+4

^Great answer. Todo el código, sin pelusa –