How to use the aurelia-templating.bindable function in aurelia-templating

var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _dec14, _dec15, _dec16, _dec17, _dec18, _dec19, _dec20, _dec21, _dec22, _dec23, _dec24, _class;

import { customElement, bindable, useView } from 'aurelia-templating';
import { bindingMode } from 'aurelia-binding';
import { inject } from 'aurelia-dependency-injection';
import { PLATFORM } from 'aurelia-pal';

import { Options, GLOBAL_OPTIONS } from './options';
import { Dragula } from './dragula';

export let DragulaAndDrop = (_dec = bindable({ name: 'moves', defaultBindingMode: bindingMode.oneTime }), _dec2 = bindable({ name: 'accepts', defaultBindingMode: bindingMode.oneTime }), _dec3 = bindable({ name: 'invalid', defaultBindingMode: bindingMode.oneTime }), _dec4 = bindable({ name: 'containers', defaultBindingMode: bindingMode.oneTime }), _dec5 = bindable({ name: 'isContainer', attribute: 'is-container', defaultBindingMode: bindingMode.oneTime }), _dec6 = bindable({ name: 'copy', defaultBindingMode: bindingMode.oneTime }), _dec7 = bindable({ name: 'copySortSource', defaultBindingMode: bindingMode.oneTime }), _dec8 = bindable({ name: 'revertOnSpill', attribute: 'revert-on-spill', defaultBindingMode: bindingMode.oneTime, defaultValue: true }), _dec9 = bindable({ name: 'removeOnSpill', attribute: 'remove-on-spill', defaultBindingMode: bindingMode.oneTime }), _dec10 = bindable({ name: 'direction', defaultBindingMode: bindingMode.oneTime }), _dec11 = bindable({ name: 'ignoreInputTextSelection', attribute: 'ingore-input-text-selection', defaultBindingMode: bindingMode.oneTime }), _dec12 = bindable({ name: 'mirrorContainer', attribute: 'mirror-container', defaultBindingMode: bindingMode.oneTime }), _dec13 = bindable({ name: 'targetClass', attribute: 'target-class', defaultBindingMode: bindingMode.oneTime, defaultValue: 'drop-target' }), _dec14 = bindable({ name: 'sourceClass', attribute: 'source-class', defaultBindingMode: bindingMode.oneTime, defaultValue: 'drag-source' }), _dec15 = bindable({ name: 'dragFn', attribute: 'drag-fn', defaultBindingMode: bindingMode.oneTime }), _dec16 = bindable({ name: 'dropFn', attribute: 'drop-fn', defaultBindingMode: bindingMode.oneTime }), _dec17 = bindable({ name: 'dragEndFn', attribute: 'drag-end-fn', defaultBindingMode: bindingMode.oneTime }), _dec18 = bindable({ name: 'clonedFn', attribute: 'cloned-fn', defaultBindingMode: bindingMode.oneTime }), _dec19 = bindable({ name: 'overFn', attribute: 'over-fn', defaultBindingMode: bindingMode.oneTime }), _dec20 = bindable({ name: 'outFn', attribute: 'out-fn', defaultBindingMode: bindingMode.oneTime }), _dec21 = bindable({ name: 'shadowFn', attribute: 'shadow-fn', defaultBindingMode: bindingMode.oneTime }), _dec22 = customElement('dragula-and-drop'), _dec23 = useView('./dragula-and-drop.html'), _dec24 = inject(GLOBAL_OPTIONS), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = _dec5(_class = _dec6(_class = _dec7(_class = _dec8(_class = _dec9(_class = _dec10(_class = _dec11(_class = _dec12(_class = _dec13(_class = _dec14(_class = _dec15(_class = _dec16(_class = _dec17(_class = _dec18(_class = _dec19(_class = _dec20(_class = _dec21(_class = _dec22(_class = _dec23(_class = _dec24(_class = class DragulaAndDrop {

  constructor(globalOptions) {
    this.dragula = {};
    this.globalOptions = globalOptions;
  }

  bind() {
    let boundOptions = this._setupOptions();

    let aureliaOptions = {
      isContainer: this._isContainer.bind(this),
      moves: this._moves.bind(this),
      accepts: this._accepts.bind(this),
      invalid: this._invalid.bind(this)
    };

}

function _initializerWarningHelper(descriptor, context) {
  throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { PLATFORM } from 'aurelia-pal';
import { inject } from 'aurelia-dependency-injection';
import { bindingMode, computedFrom } from 'aurelia-binding';
import { bindable, customElement } from 'aurelia-templating';
import { resolvedView } from 'aurelia-view-manager';
import { EntityManager } from 'aurelia-orm';
import { Router } from 'aurelia-router';
import { Homefront } from 'homefront';

export let DataTable = (_dec = customElement('datatable'), _dec2 = resolvedView('spoonx/datatable', 'datatable'), _dec3 = inject(Router, Element, EntityManager), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec5 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec6 = computedFrom('columnLabels', 'hasVisibleActions', 'detailView'), _dec7 = computedFrom('columns'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class DataTable {

  constructor(router, element, entityManager) {
    _initDefineProp(this, 'criteria', _descriptor, this);

    _initDefineProp(this, 'where', _descriptor2, this);

    _initDefineProp(this, 'limit', _descriptor3, this);

    _initDefineProp(this, 'columns', _descriptor4, this);

    _initDefineProp(this, 'searchColumn', _descriptor5, this);

    _initDefineProp(this, 'actions', _descriptor6, this);

    _initDefineProp(this, 'searchable', _descriptor7, this);

}

  return desc;
}

function _initializerWarningHelper(descriptor, context) {
  throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { logger, EntityManager } from '../aurelia-orm';
import { bindingMode } from 'aurelia-binding';
import { bindable, customElement } from 'aurelia-templating';
import { inject } from 'aurelia-dependency-injection';
import { resolvedView } from 'aurelia-view-manager';

export let Paged = (_dec = customElement('paged'), _dec2 = resolvedView('spoonx/orm', 'paged'), _dec3 = inject(EntityManager), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec5 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec6 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec7 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Paged {

  constructor(entityManager) {
    _initDefineProp(this, 'data', _descriptor, this);

    _initDefineProp(this, 'loading', _descriptor2, this);

    _initDefineProp(this, 'page', _descriptor3, this);

    _initDefineProp(this, 'error', _descriptor4, this);

    _initDefineProp(this, 'criteria', _descriptor5, this);

    _initDefineProp(this, 'repository', _descriptor6, this);

    _initDefineProp(this, 'resource', _descriptor7, this);

return desc;
}

function _initializerWarningHelper(descriptor, context) {
  throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import getProp from "get-prop";
import { inject } from "aurelia-dependency-injection";
import { bindingMode, BindingEngine } from "aurelia-binding";
import { bindable, customElement } from "aurelia-templating";
import { logger, EntityManager, Entity, OrmMetadata } from "../aurelia-orm";
import { resolvedView } from 'aurelia-view-manager';

export let AssociationSelect = (_dec = customElement('association-select'), _dec2 = resolvedView('spoonx/orm', 'association-select'), _dec3 = inject(BindingEngine, EntityManager, Element), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec5 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class AssociationSelect {
  constructor(bindingEngine, entityManager) {
    _initDefineProp(this, "criteria", _descriptor, this);

    _initDefineProp(this, "name", _descriptor2, this);

    _initDefineProp(this, "repository", _descriptor3, this);

    _initDefineProp(this, "identifier", _descriptor4, this);

    _initDefineProp(this, "property", _descriptor5, this);

    _initDefineProp(this, "resource", _descriptor6, this);

    _initDefineProp(this, "options", _descriptor7, this);

    _initDefineProp(this, "association", _descriptor8, this);

function _initializerWarningHelper(descriptor, context) {
  throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { bindingMode, observable, BindingEngine } from 'aurelia-binding';
import { bindable, InlineViewStrategy } from 'aurelia-templating';
import { Focus } from 'aurelia-templating-resources';
import { inject, Optional } from 'aurelia-dependency-injection';
import { DOM } from 'aurelia-pal';
import { TaskQueue } from 'aurelia-task-queue';
import { autoCompleteOptions } from './autocompleteoptions';

let nextID = 0;

export let Autocomplete = (_dec = inject(Element, BindingEngine, TaskQueue, Optional.of(Focus)), _dec2 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = (_class2 = class Autocomplete {

  constructor(element, bindingEngine, taskQueue, focus) {
    _initDefineProp(this, 'controller', _descriptor, this);

    _initDefineProp(this, 'value', _descriptor2, this);

    _initDefineProp(this, 'title', _descriptor3, this);

    _initDefineProp(this, 'placeholder', _descriptor4, this);

    _initDefineProp(this, 'disabled', _descriptor5, this);

    _initDefineProp(this, 'delay', _descriptor6, this);

    _initDefineProp(this, 'small', _descriptor7, this);