Mustache

We use Mustache.js as our templating engine. It allows us to easily combine JSON data arrays with HTML templates and render the results to the screen. By using MustacheJS the syntax for our templates can also be produced server-side by one of their other libraries.

Other areas of interest for MustacheJS and Blockstrap include:

Example Code
URL Routing

Example Code

As seen from the corresponding documentation, a quick example of how Mustache can be used:

var view = {
    title: "Joe",
    calc: function () 
    {
        return 2 + 4;
    }
};
var output = Mustache.render("{{title}} spends {{calc}}", view);

This would render as follows:

Joe spends 6

- back to top

URL Routing

By default, if visiting the root URL of the application without any additional URL paramters or hashes, the data and HTML for the view will be fetched via AJAX from the following locations (further defined within the necessary configuration files):

DATA: /themes/default/data/index.json
HTML: /themes/default/html/index.html

If visiting the accounts URL such with the hash as follows your-application.com#accounts, Blockstrap will assume you want to load the accounts`page and will also load:

DATA: /themes/default/data/accounts.json
HTML: /themes/default/html/accounts.html

It will first render the index page before then merging the accounts data and rendering the content from accounts by replacing the configured $.fn.blockstrap.settings.content_id element with the additional HTML.

- back to top