Using Templates

JSS supports templates, which facilitates the separation of Javascript and HTML code into separate files.

JSS templates work by expanding tags in a template using values provided by a hash or object. There are no if statements or any other logic - just tags, which are shown by double curly braces, e.g. {{name}}.

This tag expansion happens on the server-side - in the server-side JSS file, Javascript objects are supplied to a render method that takes the HTML file containing the tags and produces the expanded HTML file. See this example.

Variables

Variables are the most basic tag. A {{name}} tag in a basic template will try to find the name key in the current context. If there is no name key, an empty string is substituted.

All variables are HTML escaped by default. If you want to return unescaped HTML, use {{name}}. You can also use & to unescape a variable, e.g. {{& name}}.

Sections

Sections render blocks of text one or more times, depending on the value of the key in the current context. They begin with a pound and end with a slash., e.g. {{#item}} and {{/item}}.

If the key has a value of false or is an empty list, the HTML between the pound and slash is not returned. If the key exists and is non-false, the HTML between the pound and the slash is rendered one or more times - once for every item in the list.

JSS templates are based on Mustache templates. More detailed examples and extended capabilities such as lambdas are explained here.