Support Center

Mustache

Saber uses mustache embedded in HTML so that users can load dynamic content onto their web pages when using the Saber Editor. When you add mustache code to your HTML pages, they will be displayed within the Page Content tab within Saber's Editor as form fields. This allows users to manage their content outside of the HTML code and even write multilingual content for their web pages.


Variables

The most basic form of mustache is the variable (e.g. <div>{{content}}</div>). A mustache variable is replaced with data provided by the user.


Blocks

To selectively render HTML content, use a mustache block (e.g. {{hello}}<div>Hello world!</div>{{/hello}}). Your mustache block will show up as a checkbox in the Page Content tab within Saber's Editor. If you select the checkbox, the HTML content inside the mustache block will be rendered, and if the checkbox is empty, the block will not be rendered.


Partials

To render a partial view onto your page, you can specify the HTML file you wish to render (e.g. {{sidebar "/partials/sidebar.html"}}). The variable sidebar in the example above can be named however you want. You can also include properties in your mustache partial that will populate mustache variables located inside the partial view HTML file (e.g. {{menu "/partials/products-menu.html" breadcrumb:"Products/Jewelry", filter:"jewelry"}}).

You should first create an HTML file within your partials/ folder by selecting File > New File from the top menu and use partials for the File Path field. Then select Partial View from the HTML Components menu to select your HTML file and generate the mustache code automatically.


Components

Components are special mustache variables that are available from various plugins. Mustache components will render dynamic, sometimes complex HTML content depending on which plugins you are using. To generate a mustache component, select a component from the HTML Components menu.

{{page-list path:"store/products"}}

The example above will create a Page List component and display a list of product pages using the Page List plugin.