Developer Center

Mustache

Saber uses mustache embedded in HTML so that users can load dynamic content onto their web pages when using the Saber Editor. Mustache is also used on the server-side when rendering View instances. In fact, the View class is responsible for rendering all HTML views that contain mustache within Saber, so you can use mustache within your plugin's HTML files to render dynamic HTML content.


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.

var view = new View("/Vendors/RSS/reader.html");
view["feeds"] = RSS.RenderFeeds();
return view.Render();

The example above renders a view that contains the mustache variable {{feeds}}.


You can also bind objects to mustache variables using the Bind(dynamic obj) method.

var html = new StringBuilder();
var view = new View("/Vendors/Comments/comment.html");
foreach(var comment in comments)
{
view.Bind(new { comment });
html.Append(view.Render());
view.Clear();
}
return html.ToString();

The example above binds a comment object to the comment mustache variable, then appends the rendered view to an HTML string and clears all binding within the view before moving on to the next comment.

<div class="comment">
<div class="user">{{comment.user}}</div>
<div class="body">{{comment.body}}</div>
</div>

The example above contains mustache variables that match fields found within the comment object. Saber then replaces all mustache variables that start with comment. with the fields found in the comment object.

Note that all mustache variables should be lowercase even if the C# objects passed into the Bind() method are captialized.


Blocks

To selectively render HTML content, use a mustache block (e.g. {{hello}}<div>Hello world!</div>{{/hello}}).

var view = new View("/Vendors/Commerce/products.html");
if(CheckSecurity("product-tools"))
{
view.Show("product-tools");
}
return view.Render();

The example above renders a view that displays product tools if the user has access to the product-tools security key.


Partials

To render a partial view onto your page, you can specify the HTML file you wish to render (e.g. {{credit-card-form "Vendors/ShoppingCart/cc-form.html"}}). The variable credit-card-form in the example above is used to identify the partial view.

You can also include properties in your mustache partial that will populate mustache variables located inside the partial view HTML file (e.g. {{menu "Vendors/ShoppingCart/products-menu.html" breadcrumb:"Products/Jewelry", filter:"jewelry"}}).

When creating a new instance of the View class, you can access partial views that are contained within the view by using the Child(string id) method.

var view = new View("/Vendors/ShoppingCart/cart.html");
view.Child("credit-card-form").Bind(new { credit = customer.defaultCard });
return view.Render();

In the example above, we set default credit card information inside a credit-card-form partial view for the shopping cart plugin.


Components

Mustache components are rendered by matching the mustache variable name prefix with an HtmlComponentModel defined within any plugins loaded in Saber. If a mustache variable name prefix matches, Saber will render the component using the HtmlComponentModel.Render() method.

{{products-clothing filter:"clothing", length:"3"}}

In the example above, Saber renders a Product List component after matching the products prefix. The string -clothing is a user-defined suffix for the mustache component name that is used to identify that instance of the Product List component. This is useful if you need to define multiple instances of the same mustache component within your HTML page.

Learn more about developing Mustache Components.


Special Variables

Your plugin can register special Mustache Variables that users can include within their HTML code to display unique information about their website, users, or plugins. For example, the {{username}} variable will display the user's display name if they are signed into their account on your website. Also, the {{user}}{{/user}} Mustache Block is a special variable that shows the contents of the block if the user is signed into their account, while the {{no-user}}{{/no-user}} block will show the contents of the block if the user is not currently signed into their account on your website.

You can use Special Variables within Saber by editing your web page HTML file in Saber, then by clicking the HTML Components icon and selecting the Special Variable component, which will allow you to choose from a list of special variables to add to your HTML file.

To make a Special Variable, create a new class that inherits IVendorHtmlComponents and build a HtmlComponentModel that is returned by the Bind() method. Make sure not to set any HtmlComponentModel.Parameters. To transform your Special Variable into a Mustache Block, set the HtmlComponentModel.Block property to True.