mustache.js

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.

If you like this content and found it helpful, please consider supporting me with a small donation.

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.

function loadUser() {
  $.get('template.mst', function(template) {
    var rendered = Mustache.render(template, {name: "Luke"});
    $('#target').html(rendered);
  });
}

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 .

<div>
    <h5>This is the view file</h5>
    Name: {{name}}<br />
    Age: {{age}}<br />
</div>

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 .

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<button id="show">Show Data</button>
<div class="result">

</div>

<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

app.js

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

var app = {

    data: {
        name: "Chris",
        age: "39"
    },

    displayData: function () {
        app.renderTemplate("test", app.data, function (returnValue) {
            $('.result').append(returnValue);
        });

    },


    renderTemplate: function (templatefile, data, callback) {
        var tpl = 'views/' + templatefile + '.mst';
        $.ajax(tpl,
            {
                dataType: "text",
                success: function (template) {
                    var rendered = Mustache.render(template, data);
                    callback(rendered);
                }
            });
    }
};


$(document).ready(function () {
    $('#show').on('click', function () {
        app.displayData();
    });
});

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, Experte für technisches SEO. ich liebe meinen Job, meine Familie und den Libanon. Fragen? Mail: chris@haensel.pro.

Ein Gedanke zu „Mustache.js: return rendered result to callback function“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.