Question

So, I just started working with flatironjs and “plates“. I’m trying to figure out how I can have a main layout template and then a partial template that loads content into the main layout template similar to how expressjs does it…

With expressjs there’s the layout.js and perhaps index.js. index.js populates the content area of layout.js. It seems like this would be baked I’m not seeing a way to do this based on the documentation.

Answer 1

Main layout template (template.html):

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

Partial (partial.html):

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

Then you can do this:

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});

So console.log(rendered)should give you:

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