Mustache is “logic-less” because there are only tags that are replaced with a value or a series of values. In Weebly, Mustache tags are used in partials to provide content like product information for a page.

A Quick Example

A typical Mustache template:

Customer Name: {{name}}
Thanks for placing Order #{{order_no}}!
Your shipping will be:
{{#overnight}}
Fedex Overnight: ${{shipping_cost}}
{{/overnight}}

Given the following hash: 

{
"name": "Chris",
"order_no": 1234,
"shipping_cost": 20,
"overnight": true
}

Will produce the following: 

Customer Name: Chris
Thanks for placing Order #1234!
Your shipping will be:
Fedex Overnight: $20

Tag Types

Tags are indicated by the double brackets. In the above example, {{name}} is a variable tag that gets replaced by the given content Chris.

Variables

Variable tags are the most common and are replaced with content by finding the key (for example name) in the current context, and if not found, searching in parent contexts recursively. If nothing is found, then nothing is rendered.

You can escape variables using & or triple mustaches. For example, both &name and {{{name}}} can be used to display name: <b>Chris</b> as Chris.

Sections

Sections can display a block of text one or more times, in other words, can iterate over a list. You use the hash (#) to start a section and a slash (/) to end it. If the key exists and has a non-false value, the HTML between the pound and slash will be rendered once for each item in the list. If the list is empty or false, then whatever is between the # and / is not displayed. If the value is not a list, but a single item, then that single value displays.

For example, in the Archives partial in Weebly themes, the #items section is used on blog pages:


{{#items}}
    <a href="{{url}}" class="blog-link">{{title}}</a>
    <br />
{{/items}}

It displays a list of monthly blog post titles as links.

You can also display inverted sections, in other words the inverse of the value of the tag. Inverted sections start with a caret (^) and end with a slash (/).

For example, the Archives partial contains an inverted section (#t1) after the #items section to display text if no blog post titles exist:

{{^items}}
    {{#tl}}No Archives{{/tl}}
{{/items}}

Comments

Comments begin with a bang (!). Anything following that is ignored. Many Weebly partials contain comments to describe what the partial is used for:


{{!
An area that shows the various months of blog post archives.
Most likely in the sidebar the blog sidebar.
}}

Partials

Partials can be nested in other partials, using the greater than sign (>). For example, the Main partial used to display products actually calls other partials for the content:

<div id="wsite-com-product-area">
    {{> commerce/product/images}}
    <div id="wsite-com-product-info">
        <div id="wsite-com-product-info-inner">
            {{> commerce/product/title}}
            {{> commerce/product/sku}}
            {{> commerce/product/price}}
            {{> commerce/product/short-description}}
            {{> commerce/product/sharing}}
            {{> commerce/product/options}}
            <div id="wsite-com-product-inventory">
                {{> commerce/product/quantity}}
                {{> commerce/product/inventory}}
            </div>
            . . .
        </div>
    </div>
</div>

Help make these docs better!









Tags: