Difference between compile(), parse(), and render() in mustache.js

javascript templates mustache
alnafie picture alnafie · Feb 21, 2012 · Viewed 11.1k times · Source

What is the difference between:

Mustache.compile() , Mustache.parse(), and Mustache.render()

in the new mustache.js version 0.5.0, and perhaps for bonus points you could tell us what the difference between parsing and compiling is in general.

Answer

Tomalak picture Tomalak · Feb 21, 2012

EDIT

With an API change introduced in version 0.8.0, the compile() method has been integrated into parse(). Manually compiling the templates is no longer required.

Mustache.parse()

Syntactically parses the template and creates a JavaScript function body (a string) from it. During that process it notifies of any syntax errors encountered in the template.

Mustache.compile()

Uses the function body returned from a successful parse() to create an actual JavaScript function. The created function is placed in a cache for re-use.

Mustache.render()

Takes the appropriate function for a given template (the one that was created by compile()) and applies it to actual data. This creates the result meant to be shown on screen.

Related questions

How do I accomplish an if/else in mustache.js?

It seems rather odd that I can't figure how to do this in mustache. Is it supported? This is my sad attempt at trying: {{#author}} {{#avatar}} <img src="{{avatar}}"/> {{/avatar}} {{#!avatar}} <img src="/images/default_avatar.png" …

Read More
How to handle an IF STATEMENT in a Mustache template?

I'm using mustache. I'm generating a list of notifications. A notification JSON object looks like: [{"id":1364,"read":true,"author_id":30,"author_name":"Mr A","author_photo":"image.jpg","story":"wants to connect","notified_type":"Friendship","action":"create"}] With mustache, how …

Read More
Iterate over an object for Handlebars?

So this is the general gist of my data (copied the look from chrome webkit inspector). > Object > Fruit: Array[2] > 0: Object name: "banana" color: "yellow" animalthateats: "monkey" id: 39480 > 1: Object length: 2 > Vegetables: Array[179] > Dairy: Array[2] > …

Read More