Skip Navigation

Templates

Overview

HTML templates are based on Handlebars.

It is now highly recommended to use React in place of Handlebars templates.

Usage

Handlebars templates look like regular HTML with embedded Handlebars expressions:

<div class="entry">
    <div class="message">{{message}}</div>
</div>

Templates can be configured in the view classes:

import {AbstractView} from 'sabre-ngv-app/app/AbstractView';
import {AbstractViewOptions} from 'sabre-ngv-app/app/AbstractViewOptions';
import {AbstractActionOptions} from 'sabre-ngv-app/app/common/views/AbstractActionOptions';
import {I18nService} from 'sabre-ngv-app/app/services/impl/I18nService';
import {Initial} from 'sabre-ngv-core/decorators/classes/Initial';
import {Template} from 'sabre-ngv-core/decorators/classes/view/Template';
import {CssClass} from 'sabre-ngv-core/decorators/classes/view/CssClass';
import {AgentProfileModel} from '../model/AgentProfileModel';
import {getService} from '../Context';

// Passing helper function that can be later used in the template
@Initial<AbstractViewOptions>({
    templateOptions: {
        helpers: {t: getService(I18nService).getScopedHelper('com-example-web-module/translations')}
    }
})
// Template for the view
@Template('com-example-web-module:ExampleView')
// Wrapper CSS class for the template
@CssClass('com-example-web-module')
// Model can be later accessed in the template
export class ExampleView extends AbstractView<ExampleModel> {

    initialize(options: AbstractActionOptions): void {
        super.initialize(options);
    }
}

Example

An example of Handlebars usage can be found in com.sabre.redapp.example3.web.handlebar sample.