Basics

Basics

Simple Expressions

As shown before, the following template defines two Handlebars expressions

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

If applied to the input object

{
  "firstname": "Yehuda",
  "lastname": "Katz"
}

The expressions will be replaced by the corresponding properties. The result is then

<p>Yehuda Katz</p>

Nested input objects

Sometimes, the input objects contains other objects or arrays. For example:

  <p>{{livepage.title}} {{livepage.name}}</p>

In such a case, you can use a dot-notation to gain access to the nested properties

{
  "livepage": {
    "title": "Yehuda",
    "name": "Katz"
  }
}

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.

<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>

When you pass the following input to the above template

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz",
}

This will produce the result as below:

<div class="entry">
<h1>Yehuda Katz</h1>
</div>

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.

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

when used with this context:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

will result in:

<ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
</ul>

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

</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-stash”, { { {.

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

Pre-defined tags

Rebar also supports widgets that can be included using pre-defined tags like these:

<gevme-live-bar />
<gevme-content-block all="true" />
<gevme-nav-menu name="menu-name" />
<gevme-meet />
<gevme-poll />
<gevme-agenda />
<gevme-people-directory />
<gevme-chat />
<gevme-notification />
<gevme-sponsor />

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

Table of contents