Butterfly JS Template module documentation

In all the following examples, the Template module is loaded in the variable B as follow:

var B = loader.getModule('bCore');
B.Template = loader.getModule('bTemplate');

Templates syntax

Some commands can be executed in the templates to create some dynamic content. However no logic can be executed.

  • Expression: To display an expression, use:
    [[expression]]
    An expression is a javascript variable, or an object's attribute:
    [[userName]]
    [[user.name]]
    This is not a valid expression and will throw an error:
    [[1 + 3]]
  • Each loop: The each command allow the user to loop on an array or an object and call a template on each element:
    [[each LOOPABLE as ELEMENT on TEMPLATE]]
    Example:
    [[each users as user on userTemplate]]
    In this example, users is an array, and userTemplate will be applied for each user. Once in userTemplate, the current user is accessible via "user" (The ELEMENT part of the each command) and will be usable as follow:
    <!-- This is in userTemplate -->
    <p>My name is [[user.name] and I am [[user.age]]</p>
  • If command: The if command allows the execution of a template, only if a condition is respected or if an expression exists. The command's format is as follow:
    [[if ELEMENT then TEMPLATE with DATA]]
    [[if ELEMENT then TEMPLATE]]
    If DATA is provided, it is then accessible in TEMPLATE as root element, otherwise, ELEMENT will be available as root element.

init(templates)

First the application's list of templates must be registered. This is done with the init method.

A list of templates has the following form:

{
	templateOne: {
		url: '/url/to/a/template.html'
	},
	otherTemplate: {
		html: '<p>The template can also be some HTML directly</p>'
	}
}
  • A template is identified by its key in the object ("templateOne" or "otherTemplate").
  • A template must have either a html content, or an URL. If it has an URL, the response of the URL will be stored in a new html key to not execute the same request a second time if the template is needed again.
  • B.Template.init({
    	loginBox: {
    		url: '/templates/login.html'
    	},
    	users: {
    		html: '<ul>[[each users as user on user]]</ul>'
    	},
    	user: {
    		html: '<li>User name: [[user.name]]</li>'
    	}
    });
    									

compile(templateName, data)

Once the templates are loaded, they can be used with the compile method. This method expects up to 2 arguments:

  • templateName: The name of the template to execute.
  • data: The data to compile the template with.

The compile methods returns the compiled template as a HTML string.

Example

<ul id="users-list"></ul>
<input type="text" id="username" /><button id="add-user">Add user</button>
<script type="text/javascript">
	B.Template.init({
		users: {
			html: '[[each users as user on user]]'
		},
		user: {
			url: 'templates-demo/user.html'
		}
	});

	var users = [];
	B.on(B.$id('add-user'), 'click', function () {
		var value = B.$id('username').value;
		users.push({name: value});
		B.$id('users-list').innerHTML = B.Template.compile('users', {users: users});
		B.$id('username').value = "";
	});
</script>

Demo: