Aurelia自定义元素（bootstrap-select）无法正常工作

Question

我试图在我的项目中实现this解决方案但是使用ES1015而不是ESNext并且我无法获得attached生命周期回调。所有以前的回调都会被调用：constructor，created，bind。

这是我的视图模型代码：

import {decorators, customElement, bindable, inject} from 'aurelia-framework';
import * as selectpicker from 'bootstrap-select';
import $ from 'jquery';

export let BootStrapSelectPicker = decorators(
  customElement('select-picker'),
  bindable({name: 'selectableValues', defaultValue: null}),
  bindable({name: 'modelToBind', defaultValue: null}),
  inject(Element)
).on(class {
  constructor(element) {
    console.log("constructor");
    this.element = element;
  }

  created() {
    console.log(".....created");
  }

  bind() {
    console.log("--------binded");
  }

  attached() {
    //im supposed to create the element here
  }

});

和视图的代码：

<template>
  <select value.bind="modelToBind">
    <option value.bind="null">Selecciona un genero</option>
    <option repeat.for="p of selectableValues" value.bind="p.key">${p.text}</option>
  </select>
</template>

任何帮助都将非常感激。 提前谢谢。