Using Handlebars in your apps

All screens of your Fliplet app already include Handlebars 2.15.2 hence you can start using it straight away. Here’s a quick example following the official Handlebars docs:

// Compile a template in JavaScript by using Handlebars.compile
var source = '<h1>{{ title }}</h1><p>{{ body }}</p>';
var template = Handlebars.compile(source);

// Get the HTML result of evaluating a Handlebars template by executing the template with a context.
var context = { title: 'My New Post', body: 'This is my first post!' };
var html = template(context);

Using a template script for long-form templates

For clarity, you can include your source templates in the screen’s HTML so they’re easier to write. This is particularly useful if you are writing long-form templates. If you do so, you must escape all Handlebars commands with a backslash (\) because the screen HTML is also compiled by Handlebars in Fliplet’s engine:

<p>This is the screen of a Fliplet app</p>

<div id="output">
  <!-- This is where we will put the compiled HTML -->
</div>

<script id="source" type="text/x-handlebars-template">
\{{#if title}}
  <h4>\{{ title }}</h4>
  <p>\{{ body }}</p>
\{{/if}}
</script>
// Grab the template from the HTML and compile it with Handlebars
var source = $('#source').html();
var template = Handlebars.compile(source);

// Get the HTML result
var context = { title: 'My New Post', body: 'This is my first post!' };
var compiledHTML = template(context);

// Write the HTML into our output
$('#output').html(compiledHTML);

Using helpers to enhance your templates

Handlebars helpers can be used to add formatting (with Expression Helpers) and enhanced logic operations (with Block Expression Helpers) to your content. See Handlebars documentation to learn how to use and write your own helpers.

Fliplet apps are loaded with the following helpers.

Expression Helpers

Block Expression Helpers