Converting Handlerbars Templates

Moe-js doesn't claim to be compatible with Mustache/Handlebars but does have a similar syntax which lends it to easy conversion of existing templates to Moe-js.

This section explains common things to watch out for if you're porting existing Mustache/Handlebars templates.

Use The model. Variable To Access Passed Data

This is probably the biggest impact on existing templates. Unlike Mustache/Handlebars which automatically maps referenced variables to the current scope, Moe-js doesn't provide this - primarily because under the covers this is straight JavaScript code.

While this is inconvenient for porting templates, it does make the templates more explicit, faster and facilitates the use of any JavaScript expression.

{{title}}           <- Mustache/Handlebars
{{model.title}}     <- Moe-js

Rewrite Helper Functions

Helper functions are implemented differently in Moe-js. See here for how to write Moe-js helpers.

Don't forget you can also use in-template {{#code}} blocks for one off helpers.

Quote Referenced Partials

Moe-js's partial directive expects a JavaScript expression which means the referenced template name must be quoted:

{{> partial}}       <- Mustache/Handlebars
{{> "partial"}}     <- Moe-js

Replace Shorthand Comments

Mustache/Handlebars allows two kinds of comments {{!-- --}} and {{! }}. Moe-js only supports the first format, since the second format might be a valid JavaScript expression (not operator).

{{!-- Comment  --}} <- Mustache/Handlebars or Moe-js
{{! Comment }}      <- Mustache/Handlebars only

Replace Mustache/Handlebars Style Paths

Mustache/Handlebars uses "paths" (eg: ., .. etc...) to reference the current and outer scopes. These don't exist in Moe-js because expressions are plain JavaScript.

In Moe-js, these paths generally aren't required since you can name loop variables explicitly and you can always get back to the root model object.

Fix Escaped Braces

Moe-js doesn't support escaping braces with a backslash. Replace with a JavaScript Expression:

\{{{model.title}}       <- Mustache/Handlebars
{{'{'}}{{model.title}}  <- Moe-js
{ {{~model.title}}      <- Moe-js or Mustache/Handlebars