Web Portal Templates

Ember templates use Handlebars. Handlebars is extremely similar to the ERB templates used by the Ares game code, only it mixes HTML and dynamic content instead of text and embedded Ruby code.

    {{#each model.events as |event|}}
    <tr>
        <td>
            {{#link-to 'event' event.id}}{{event.title}}{{/link-to}}
        </td>

        <td>
            {{event.organizer}}
        </td>
        <td>
            {{event.start_datetime_local}} {{event.start_time_standard}})
        </td>
    </tr>

    {{/each}}
    

Model Properties

The Model is the basic data that the template displays. It is set by the Route. The template can access various fields within the model. In the Events example above, you can see that the template uses model.events to get the list of events.

Controller Properties

In addition to the model data, templates can also access methods and properties from the screen’s Controller. We can see that in the Events template where it uses the isApproved property in the Events controller to hide the ‘Add’ event button if the character is not approved.

Ansi and Markdown Text

Some of the text data coming back from the game is going to be blocks of ansi-formatted rendered Markdown - descriptions, backgrounds, help files, etc. The proper way to display this in a template is with the ansi helper:

    {{{ansi-format text=gameText}}}

Three braces are important because it’s already got HTML in it.

Title Helper

The template also needs to set the page title, which is shown in the browser titlebar and bookmarks. It uses the title helper for this. The title helper can accept either a plain string or a controller property (such as the model). For example:

    {{title 'Events'}}  -- plain string
    {{title model.heading}}  -- model property
    {{title pageTitle}} -- custom property that you can define in the controller