Simple Expressions
Merge Tag
Built-in Helpers
#if
#unless
#each
Array Notation
HTML Escaping
Widget Tags

Rebar is a low-code templating language from GEVME that makes it easy to build fully customised virtual venues.

Developers can use Rebar to build 2D or 3D venues. Rebar makes it possible to dynamically populate static HTML

to re-use the static elements that define the layout of a template, while dynamically populating it with data from a Project, LivePage or logged in User (among others). The static elements are written in HTML, and the dynamic elements are written in Rebar. The Rebar elements in a file act as placeholders. When the code in the file is processed by the GEVME Virtual engine, the Rebar elements are replaced by dynamic data.

Rebar uses a combination of objects and tags inside template files to display dynamic content.

Rebar is fully compatible with Handlebars templates.

Simple Expressions

Merge Tag

A Rebar template enclosed with a double mustache is referred as a merge tag.

<p>{{user.firstname}} {{user.lastname}}</p>

Built-in Helpers

#if

You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, “”, 0, or [], Rebar will not render the block. An if helper is opened using and close by .

This can be used to render different blocks based on a condition that the user selects, or to change the css styling of a component.

The following code snippet below shows a practical example usage of #if in GEVME Virtual.

{{#if setting.livebar.enabled}}
    {{#if setting.livebar.positionRight}}
        <div class="gevme-template-chat"
            {{#if setting.livebar.closable}}
            style="flex: 0 0 60px;"
            {{else}}
            style="flex: 0 0 360px;"
            {{/if}}>
            <gevme-live-bar />
        </div>
    {{/if}}
{{/if}}

In this case, a div block of gevme-template-chat class will be rendered only when livebar is enabled and positionRight, the css would then depend on whether livebar is closable.

#unless

You can use the unless helper as the inverse of the if helper. Its block will be rendered if the expression returns a falsy value.

<div class="entry">
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
</div>

If looking up license under the current context returns a falsy value, Handlebars will render the warning. Otherwise, it will render nothing.

#each

You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over.

The following code snippet below shows a practical example usage of #each in GEVME Virtual where each labels in the form are being iterated.

<form data-gevme-form="gevme-form" data-gevme-login-type="login-with-shared-pwd">
  {{#each setting.loginOption.sharedPassword.value}}
  <label data-gevme-label="gevme-{{this.field}}" for="{{this.field}}">
    <span class="data-gevme-label-heading" style="display: none;">{{this.label}}</span>
    <input data-gevme-input="gevme-{{this.field}}" 
    type="{{this.field}}" 
    name="{{this.field}}" 
    placeholder="密碼" 
    autocomplete="off" 
    minlength="1" />
  </label>
  {{/each}}
  <input data-gevme-input="gevme-submit" type="submit" value="登入" />
</form>

When looping through items in each, you can optionally reference the current loop index via {{@index}}.

{{#each array}} {{@index}}: {{this}} {{/each}}

Additionally for object iteration, {{@key}} references the current key name:

{{#each object}} {{@key}}: {{this}} {{/each}}

The first and last steps of iteration are noted via the @first and @last variables when iterating over an array. When iterating over an object only the @first is available. Nested each blocks may access the iteration variables via depth based paths. To access the parent index, for example, @../index can be used.

Array Notation

<ul id="access-array">
{{people.1.name}}
</ul>

The above code snippet shows how you can access the element of an array to its index.

Note: Accessing an array would not work using people[1].name in rebars language.

HTML Escaping

Because it was originally designed to generate HTML, Rebar escapes values returned by a {{expression}}. If you don’t want Rebar to escape a value, use the “triple-mustache”, {{{.

raw: {{{specialChars}}}
html-escaped: {{specialChars}}

The special characters in the second line will be escaped:

raw: & < > " ' ` =
html-escaped: &amp; &lt; &gt; &quot; &#x27; &#x60; &#x3D;

Normally, this is used to extract common template from the global folder across the different livepages.

It will look something like this

global/partials/head-section.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title> | </title>
    <link
      rel="stylesheet"
      type="text/css"
      href="/styles/font.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/styles/theme.css"
    /></head
  >   
  <body>
    <div class="gevme-template-container">
                 
      <gevme-header />
    </div>
  </body>
</html>

global/partials/tail-section.html

		</div>   
  </body>
</html>

And index.html for the different livepages will be wrapped using both the head and tail section.

{{{global.partials.head-section}}}

  <main>
  ...
  </main>
{{{global.partials.tail-section}}}

Widget Tags

Rebar also supports widgets tags that have similar syntax to HTML tags. Here are some examples:

<gevme-live-bar />
<gevme-content-block all="true" />
<gevme-nav-menu name="menu-name" />
<gevme-agenda />
<gevme-chat />
<gevme-sponsor />

For more details about the usage of each tag, click here.

Rebar Basics