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

// Aurelia
import {
  bindable,
  bindingMode
} from 'aurelia-framework';

import icons from 'configs/icons';

export class SvgIcon {
  @bindable({ defaultBindingMode: bindingMode.oneWay }) iconId;  // eslint-disable-line
  @bindable({ defaultBindingMode: bindingMode.oneWay }) iconMirrorH;  // eslint-disable-line
  @bindable({ defaultBindingMode: bindingMode.oneWay }) iconMirrorV;  // eslint-disable-line

  constructor () {
    this.icon = {
      viewBox: '0 0 16 16',
      fillRule: '',
      svg: ''
    };
  }

  attached () {
    const id = this.iconId.toUpperCase().replace(/-/g, '_');
    this.icon = icons[id] ? icons[id] : icons.WARNING;
  }
}

import * as $ from 'jquery';

@inject(Element)
// @containerless()
@customElement('abt-alert')
export class BootstrapAlert {

  @bindable({ defaultBindingMode: bindingMode.oneTime }) public size: string = 'md';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public type: string = 'primary';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public animate: boolean | string = true;


  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public showAlert: boolean | null = null;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public dismissible: boolean | string = false;

  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsShow: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsShown: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsHide: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsHidden: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsClose: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsClosed: Function;

  private alert: HTMLDivElement;

  constructor(private element: Element) {
  }

  private attached() {

inject  // eslint-disable-line
} from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';  // eslint-disable-line

// Injectables
import States from 'services/states';  // eslint-disable-line

import { EVENT_BASE_NAME } from 'components/range-select/range-select-defaults';


@inject(EventAggregator, States)
export class RangeSelect {
  @bindable({ defaultBindingMode: bindingMode.oneWay }) eventId;  // eslint-disable-line
  @bindable({ defaultBindingMode: bindingMode.oneWay }) from = 0;  // eslint-disable-line
  @bindable({ defaultBindingMode: bindingMode.oneWay }) to = 1;  // eslint-disable-line
  @bindable({ defaultBindingMode: bindingMode.oneWay }) selected = [0, 1];  // eslint-disable-line

  constructor (eventAggregator, states) {
    this.event = eventAggregator;

    this.store = states.store;
    this.unsubscribeStore = this.store.subscribe(this.update.bind(this));

    this.subscriptions = [];

    this.selectFrom = this.selected[0];
    this.selectTo = this.selected[1];

    this.update();
  }

  /* ----------------------- Aurelia-specific methods ----------------------- */

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

export type PopoverPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right';
export type PopoverBoundary = 'viewport' | 'window' | 'scrollParent';

import * as $ from 'jquery';

@containerless()
@customElement('abt-popover')
export class BootstrapPopoverCustomElement {

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public animation: boolean | string = true;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public container: boolean | string | Element = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public delay: number | object = 0;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public html: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public placement: PopoverPlacement | Function = 'right';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public selector: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public title: string | Element | Function = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public trigger: string = 'click';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public offset: number | string = 0;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public fallbackPlacement: string | string[] = 'flip';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public boundary: PopoverBoundary = 'scrollParent';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public template: string =
    '<div role="tooltip" class="popover"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';

  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsShow: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsShown: Function;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsHide: Function;

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

@inject(Element)
@containerless()
@customElement('at-button-group')
export class AtButtonGroup {

  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public label: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public size: string = 'md';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string = '';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string = '';

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

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

  constructor(private element: Element) { }

  private attached() {
    const onlyVerticalAttribute = (this.vertical === '' && this.element.hasAttribute('vertical'));
    this.vertical = onlyVerticalAttribute || this.vertical === 'true' || this.vertical === true;

    const onlyisToggleAttribute = (this.toggle === '' && this.element.hasAttribute('toggle'));
    this.toggle = onlyisToggleAttribute || this.toggle === 'true' || this.toggle === true;
  }

}

import { customElement } from 'aurelia-templating';

type ExpandSize = 'none' | 'sm' | 'md' | 'lg';

@inject(Element)
@customElement('abt-navbar')
export class BootstrapNavBar {
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public colorClass: string = 'light';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public backgroundColorClass: string = 'light';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public expandSize: ExpandSize = 'sm';

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public toggler: boolean = true;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public togglerIconClass: string = 'navbar-toggler-icon';

  @children('.navbar-brand') private brand: Array;

  private navbar: Element;

  private afterAttached() {
    this.navbar.classList.add(`navbar-${this.colorClass}`);
    this.navbar.classList.add(`bg-${this.backgroundColorClass}`);

    if (this.expandSize !== 'none') {
      this.navbar.classList.add(`navbar-expand-${this.expandSize}`);
    }
    let hasMultipleBrands = this.brand.length > 1;

    if (hasMultipleBrands) {
      throw Error('You cannot have multiple instances of [abt-navbar-brand] component, please check your DOM');

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

@containerless()
@customElement('abt-navbar-nav')
export class BootstrapNavBarNav {
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string;
}

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


import * as $ from 'jquery';


@inject(Element)
@containerless()
@customElement('abt-scrollspy')
export class BootstrapScrollSpy {

  @bindable({ defaultBindingMode: bindingMode.oneTime }) public target: string;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public offset: number = 10;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsScrollspy: Function;

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


  private spy: HTMLElement;

  constructor(private element: Element) { }


  private attached() {

    this.onBody = Boolean(this.onBody);
    this.offset = Number(this.offset);

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

@inject(Element)
@containerless()
@customElement('abt-navbar-dropdown-item')
export class BootstrapNavBarDropDownItem {
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public href: string;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public click: Function;

  private onClick(event: Event) {

    if (this.click) {
      this.click({ event: event });
    }
    return true;
  }
}

import { inject, customElement, bindingMode, bindable, containerless } from 'aurelia-framework';
import * as $ from 'jquery';
@customElement('abt-listgroup')
export class ListGroupCustomElement {
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public flush: boolean | string = false;


  private listGroupTemplate: Element;
  private listGroup: Element;

  private attached() {
    let isFlush = (this.flush === '' && this.listGroupTemplate.hasAttribute('active')) || this.flush.toString() === 'true';
    if (isFlush) {
      this.listGroup.classList.add('list-group-flush');
    }
  }

}