can.mustache

  • function
can/view/mustache 2.1
 

Deprecated 2.3

can.mustache will no longer be the default template engine in 3.0. Please switch to can.stache. can-upgrade can help.

Logic-less mustache templates with live binding when used with can.Maps.

can.mustache( [id,] template )

Creates an instance of a mustache template.

Parameters

  1. id {String}Optional

    If two arguments are passed, the first argument is the id of the template that will be registered with can.view.

  2. template {String}

    The content of the mustache template.

Returns

{renderer(data, helpers)}

A function that renders the mustache template into a live documentFragment.

Use

Mustache and Handlebar templates are compatible with can.mustache.

Mustache templates looks similar to normal HTML except they contain keys for inserting data into the template and sections to enumerate and/or filter the enclosed template blocks.

For example, the following renders a welcome header for a user and displays the number of messages.

Mustache Template

<script id="template" type="text/mustache">
    <h1>Welcome {{user}}!</h1>
    <p>You have {{messages}} messages.</p>
</script>

JavaScript

var data = new can.Map({
    user: 'Tina Fey',
    messages: 0
});

var template = can.view("#template", data)
document.body.appendChild(template);

HTML Result

<h1>Welcome Tina Fey!</h1>
<p>You have 0 messages.</p>

To update the html using live-binding, change an observable value:

data.attr('message', 5)

This updates this paragraph in the HTML Result to:

<p>You have 5 messages.</p>

can.mustache provides significantly more functionality such as:

Tags

{{key}}

Insert the value of the key into the output of the template.

{{{key}}}

Behaves just like {{key}} and {{helper}} but does not escape the result.

{{&key}}

The `{{&key}}` tag is an alias for {{{key}}}, behaving just like {{key}} and {{helper}} but does not escape the result.

{{#key}}BLOCK{{/key}}

Render blocks of text one or more times, depending on the value of the key in the current context.

{{/key}}

Ends a {{#key}} or {{#helper}} block.

{{^key}}BLOCK{{/key}}

Render blocks of text if the value of the key is falsey.

{{>key}}

Render another template within the current template.

{{!key}}

The comment tag operates similarly to a `` tag in HTML.