Node.js + Express - How to get Mustache partials working?

Question

I'm trying to get Mustache working properly with Express, and as one can guess, I'm having troubles.

The following line initializes Mustache nice and clean. Variables render as expected.

app.register('html', require(__dirname+'/public/js/libs/mustache.js'));

However, the problems start to rise when partials are thrown in the mix. With Mustache, this here partial should invoke header view/partial.

{{> header}}

But alas, nothing happens. :/ Even when I offer the partial directly, Mustache fails to render it.

app.get('/', function(req, res) {
    res.render('welcome', {
        partials: {
            header: '<h1>Header</h1>'           
        }
    });
});

So, it seems that the partials aren't working at all. I've found one hack that get's the partials somewhat working:

http://bitdrift.com/post/2376383378/using-mustache-templates-in-express

After that the partials render when offered directly at render call (see above), but it still fails on rendering the partials directly to views/layouts:

Layout looks something like this:

Behold, the header
{{> header}}
<p>Let's move to more important stuff...</p>

Header view looks something like this:

<h1>Header</h1>

Express can load the views by themselves just ok, but it doesn't know how to handle the Mustache partials...

Answer 1

Using express (at least version 3) and mustache-express, You can load partials as usual using double mustaches that begin with a greater than sign.

First consider the following is appended within our app.js file:

/** import the module */

import mustache from 'mustache-express';

/** view engine setup */

app.engine('mst', mustache());
app.set('view engine', 'mst');
app.set('views', path.join(__dirname, 'mvc/views'));

/** the route where we will display the partials */

app.get('/', (req, res) => {
  let view = {
    title: 'Homepage',
    // ...
  };

  /** we are going to use a file called template.mst for rendering */
  res.render('template', view);
});

Any double mustaches that begin with a greater than sign (i.e. {{> file}}) will be considered a partial. The file within the partial will be rendered at runtime. Consider this file to be a partial we want to insert:

mvc/views/partial.mst

<h2>418 | I'm a teapot</h2>

And here is our template:

mvc/views/template.mst

<h1>template.mst file</h1>

<!-- output: <h2>418 | I'm a teapot</h2> -->
{{> partial}}

Answer 2

Managed to get this working with the latest version of hogan-express.

https://github.com/vol4ok/hogan-express

All that is needed is to install hogan-express and use it as template engine on express. No hacking or tuning required.