How to use the aurelia-framework.bindingMode.oneTime function in aurelia-framework

import { inject, customElement, containerless, bindable, bindingMode } from 'aurelia-framework';


import * as $ from 'jquery';
import 'metismenu';

@inject(Element)
@containerless()
@customElement('aut-metis-menu')
export class JQueryMetisMenu {

    private metismenu: HTMLUListElement;

    @bindable({ defaultBindingMode: bindingMode.oneTime }) public class: string = '';
    @bindable({ defaultBindingMode: bindingMode.oneTime }) public style: string = '';

    @bindable({ defaultBindingMode: bindingMode.twoWay }) public showMenu: Function;
    @bindable({ defaultBindingMode: bindingMode.twoWay }) public shownMenu: Function;
    @bindable({ defaultBindingMode: bindingMode.twoWay }) public hideMenu: Function;
    @bindable({ defaultBindingMode: bindingMode.twoWay }) public hiddenMenu: Function;


    constructor(private element: Element) {
    }

    private attached() {
        // @ts-ignore
        $(this.metismenu).metisMenu()
            .on('show.metismenu', (event: any) => {
                console.log(`show menu: ${JSON.stringify(event)}`);

import {entitySchema} from '../entity-schema';
import {bindable, bindingMode, customElement} from 'aurelia-framework';
import {resolvedView} from 'aurelia-view-manager';

@customElement('entity-form')
@resolvedView('spoonx/form', 'entity-form')
export class EntityForm {

  @bindable({defaultBindingMode: bindingMode.oneTime})
  entity

  @bindable({defaultBindingMode: bindingMode.twoWay})
  model

  bind() {
    this.schema = entitySchema(this.entity);
    this.model = this.entity; /* enables the reuse of the schema-form.html */
  }

}

@bindable({ defaultBindingMode: bindingMode.oneTime }) public rtl: boolean | string = false;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public type: string = 'primary';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public color: string | null = null;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public maxRate: number = 5;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public disabled: boolean | string = false;


  @bindable({ defaultBindingMode: bindingMode.oneTime }) public fullStar = 'fa fa-star';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public emptyStar = 'fa fa-star-o';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public halfStar: boolean | string = false;



  @bindable({ defaultBindingMode: bindingMode.twoWay }) public rate: number = 0;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public rateChanged: Function;


  @children('i') private icons: Array;
  private mouseRate = -1;
  private showHalfStar = false;
  private halfStarClass: string | null = null; // fa fa-star-half-o

  constructor(private element: Element) { }

  private bind() {
    const onlyDisabledAttribute = (this.disabled === '' && this.element.hasAttribute('read-only'));

import { inject, customElement, bindable, bindingMode, containerless } from 'aurelia-framework';



@inject(Element)
@containerless()
@customElement('abt-badge')
export class BootstrapBadge {

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public type: string = 'primary';
  // @bindable({ defaultBindingMode: bindingMode.oneWay }) public href: string | null = null;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public isPill: boolean | string = false;

  constructor(private element: Element) { }

  private bind() {
    const onlyIsPillAttribute = (this.isPill === '' && this.element.hasAttribute('is-pill'));
    this.isPill = onlyIsPillAttribute || this.isPill === 'true' || this.isPill === true;
  }

}

// import 'pretty-checkbox/dist/pretty-checkbox.css';


@inject(Element, BindingEngine)
@customElement('aut-checkbox')
export class PrettyCheckboxCustomElement {


  @bindable({ defaultBindingMode: bindingMode.twoWay }) public value: any;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public model: any;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public checked: any;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public matcher: any;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public disabled: Boolean | string = false;


  @bindable({ defaultBindingMode: bindingMode.oneTime }) public switch: Boolean | String = false;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public outlined: Boolean | String = false;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public color: string;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public offColor: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public offLabel: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public animation: string = '';


  private thickCss: string;
  private plainCss: string;
  private colorCss: string;
  private offColorCss: string;
  private appearanceCSS: string;
  private animationCss: string;
  private isCheckBox: boolean;

  private state: boolean;

import { inject, containerless, customElement, bindable, bindingMode } from 'aurelia-framework';




@inject(Element)
@containerless()
@customElement('abt-alert-link')
export class BootstrapAlertLink {
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public href: string = '';
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public disabled: boolean | string = false;
}

import { inject, customElement, bindable, bindingMode, containerless } from 'aurelia-framework';




@inject(Element)
@containerless()
@customElement('abt-toolbar')
export class BootstrapToolbar {


  @bindable({ defaultBindingMode: bindingMode.oneTime }) public label: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public class: string = '';

  constructor(private element: Element) {

  }

}

import { inject, customElement, bindable, bindingMode, containerless } from 'aurelia-framework';




@inject(Element)
@containerless()
@customElement('abt-toolbar')
export class BootstrapToolbar {


  @bindable({ defaultBindingMode: bindingMode.oneTime }) public label: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public class: string = '';

  constructor(private element: Element) {

  }

}

import { bindable, bindingMode, inject, children, computedFrom, customElement } from 'aurelia-framework';

@inject(Element)
@customElement('abt-star-rate')
export class BootstrapStarRate {


  @bindable({ defaultBindingMode: bindingMode.oneTime }) public rtl: boolean | string = false;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public type: string = 'primary';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public color: string | null = null;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public maxRate: number = 5;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public disabled: boolean | string = false;


  @bindable({ defaultBindingMode: bindingMode.oneTime }) public fullStar = 'fa fa-star';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public emptyStar = 'fa fa-star-o';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public halfStar: boolean | string = false;

import { customElement, inject, bindable, bindingMode, BindingEngine, containerless } from 'aurelia-framework';
@containerless()

@customElement('abt-inputgroup-prepend')
export class BootstrapInputGroupPrependCustomElement {
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string;

}