Partials rendering in Express.js and Mustache

Question

I'm trying to load a Mustache partial in express.js, but obviously I'm having a bit of trouble. Is it possible to to take a EJS approach like this where a view partial file is included:

Node.js - EJS - including a partial

I have a template file called index.html

<html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        {{>header}}
    </body>
</html>

and header.mustache

<div class="header">
    <div style="display: table-cell;padding-left: 10px;padding-top: 8px;vertical-align: middle;">
        <img src="images/logo.png">
    </div>
</div>

In express.js, my render function is something like this:

app.get('/', function(req, res) {
    res.render('signup.html', {
        partials: {
            header: partial('header.mustache')   //this line is wrong        
        }
    });
});

I'm a newbie at this, but would like to somehow render or read the entire contents of header.mustache to the header object. Is this possible?

The line is wrong? What's happening? Do you get an error message? — eflorico, May 09 '12 at 22:03
What library are you using to render mustache? If it is [this one](https://github.com/janl/mustache.js), you have to call `Mustache.render`. — eflorico, May 10 '12 at 01:06
Possible duplicate of [Node.js + Express - How to get Mustache partials working?](https://stackoverflow.com/questions/10358053/node-js-express-how-to-get-mustache-partials-working) — u-ways, Aug 07 '18 at 14:23

score 1 · Answer 1 · edited Jun 03 '12 at 10:50

Take a look at the following link it might explain how you can setup mustache with express.js

Using Mustache Templates in Express

Now for the being able to load partials from the external files modify the tmpl.compile to following

compile : function(source, options) {
    var views = options.views || './views';
    var extension = options.extension || '.html';

    if (typeof source == 'string') {
        return function(options) {
            options.locals = options.locals || {};
            options.partials = options.partials || {};

            if (options.body) // for express.js > v1.0
                locals.body = options.body;

            for(var p in options.partials) {
                var partialFileName = views + '/' + options.partials[p] + extension;

                if(path.existsSync(partialFileName)) {
                    options.partials[p] = fs.readFileSync(partialFileName, "utf-8");
                }
            }               
            return mustache.to_html(source, options.locals, options.partials);
        };
    } else {
        return source;
    }
}

You will also want to add following 2 require statements

var fs = require("fs"),
var path = require("path");

This change assumes that your partials are in views directory and end with extension .html (so for you example you might want to change the extension of your partial to .html or adjust the above code accordingly)

Now you can use following for partial rendering

app.get('/', function(req, res) {
    res.render('signup.html', {
        partials: {
            header: 'header'   //this now works :)
        }
    });
});

Partials rendering in Express.js and Mustache

1 Answers1