Dieser Artikel wurde - im Gegensatz zu den meisten Artikeln meines Blogs - in Englisch verfasst.
Einer der Gründe dafür könnte sein, dass es sich um einen technischen Artikel handelt, der in englischer Sprache einem breiteren Publikum helfen kann.

Mustache.js: return rendered result to callback function

While using mustache.js, I wanted to return the rendered result from mustache to a callback function instead of simply filling any element’s innerHTML directly.

Just to make it easier for some of the people like me  – and to have this code easily available for myself later – I am writing this short how-to.

So what is the problem?

On the project’s github page, the maker of mustache.js shows us how to use mustache.js with jQuery to render external template files and displaying the content directly on the page.

Bit I didn’t want this behaviour for several reasons.

So I needed to return the rendered template file content to the calling method. But a simple return  would not help here, as we are working with jQuery.ajax – which works asynchronously.

So what to do? How do I get the rendered template back to my „main“ method?

How to solve this?

We’re going to use a callback function to pass the results back to the calling function. :)

Build the view file.

This file resides in  /views , where all my view/ mustache template files will be located. So the path to this file is  /views/test.mst .

The index.html

This is the main index.html file, in which we’re loading jQuery, mustache.js and our own little app.js.

It also includes a button with the id show , on which we will register an event listener, as well as a div with the class result .


The app.js file holds all the logic. Here is the code – below it, I will explain what it does in detail.

We’re creating an object called app , which holds the data and method needed to show the rendered mustache templates.

At first, we are creating the app.data  object, which holds the properties name  and age .

The app.displayData  method will be called when the button#show  is clicked. It simply calls the app.renderTemplate  method with the needed parameters templatefile  (String which holds the template file name) and data (Object which holds the data to render into the template).

The method also provides a callback function, which in return gets the returnValue  back from the app.renderTemplate  method once it completes.

Once the callback function is called, it will simply append() the  returnValue  to the element $('.result') .

The app.renderTemplate  method first builds the var tpl , which is simply a string representing the template file path. This step could be omitted and directly done within the $.ajax  method, but I like it this way as it is easier to read (at least for me).

The method then uses the jQuery.ajax  method to get the contents of the template file. It is important to use dataType: "text" , as this will get the contents as plain text instead of XMLDocument, as has happened to me before…

Within the success  function of the ajax method, we call mustache.render()  to render the data into the template. The returned content will be in the variable rendered , which is then sent to the callback  function.

Veröffentlicht von

Christian Hänsel

Web-Entwickler, SEO-Experte. Ich liebe technisches SEO, die Entwicklung von neuen Ideen und alles rund um das Internet... ja, ich habe mein Hobby zum Beruf gemacht und gehe auch Montags gerne zur Arbeit.

Verfasse einen Kommentar