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 plugins 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 comment objects to the comment mustache variable.

<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.


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 products 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. {{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"}}).

When creating a new instance of View, you can access any partial views using the Child(string id) method.

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

In the example above, we set default credit card information inside a credit-card 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.