How to use the lib.Handlebars.compile function in lib

import { Handlebars, $ } from 'lib';
import template from '../templates/date.hbs';
import dropdown from 'dropdown';
import PanelView from './DatePanelView';
import InputView from './DateInputView';
import DateTimeService from '../../../services/DateTimeService';

export default Marionette.LayoutView.extend({
    initialize() {
        this.preserveTime = !!this.getOption('preserveTime'); // If false (default), drop time components on date change
        this.allowEmptyValue = this.getOption('allowEmptyValue');
        this.dateDisplayFormat = this.getOption('dateDisplayFormat');
        this.showTitle = this.getOption('showTitle');
    },

    template: Handlebars.compile(template),

    className: 'date-view',

    regions: {
        popoutRegion: '.js-popout-region'
    },

    ui: {
        initialValue: '.js-date-input'
    },

    events: {
        focus: '__showEditor',
        mousedown: '__showEditor'
    },

initialize(options) {
        this.enabled = options.enabled;
        this.reqres = options.reqres;
        this.options.template = Handlebars.compile(options.template || template);
    },

* Copyright: 2009-2016 Comindware®
 *       All Rights Reserved
 * Published under the MIT license
 */

import { Handlebars } from 'lib';
import { helpers } from 'utils';

export default Marionette.ItemView.extend({
    initialize(options) {
        helpers.ensureOption(options, 'view');

        this.regionManager = new Marionette.RegionManager();
    },

    template: Handlebars.compile(''),

    onShow() {
        this.regionManager.addRegion('viewRegion', { el: this.$el });
        this.regionManager.get('viewRegion').show(this.options.view);
    },

    onDestroy() {
        this.regionManager.destroy();
    }
});

import { Handlebars } from 'lib';
import ReferenceButtonView from './ReferenceButtonView';
import template from '../templates/userReferenceButton.hbs';

export default ReferenceButtonView.extend({
    template: Handlebars.compile(template),

    className: 'popout-field-user',

    templateContext() {
        const value = this.model.get('value');
        return {
            text: this.options.getDisplayText(value)
        };
    },

    updateView() {
        if (this.model.get('enabled') && !this.model.get('readonly')) {
            this.ui.clearButton.show();
        } else if (this.model.get('readonly')) {
            this.ui.clearButton.hide();
        } else if (!this.model.get('enabled')) {

* Published under the MIT license
 */

import { Handlebars, moment } from 'lib';
import { helpers, dateHelpers } from 'utils';
import LocalizationService from '../../../../../services/LocalizationService';
import template from '../templates/dateInput.hbs';

export default Marionette.ItemView.extend({
    initialize(options) {
        helpers.ensureOption(options, 'timezoneOffset');
        helpers.ensureOption(options, 'allowEmptyValue');
        this.editDateFormat = dateHelpers.getDateEditFormat();
    },

    template: Handlebars.compile(template),

    className: 'date-view',

    ui: {
        dateInput: '.js-date-input'
    },

    modelEvents: {
        'change:value': 'updateDisplayValue',
        'change:readonly': '__onEnabledChange',
        'change:enabled': '__onEnabledChange'
    },

    events: {
        click: '__onClick',
        'focus @ui.dateInput': '__onFocus'