问Aurelia自定义元素与对话框

EN

<shimmy-dialog type="video" href="/test">Hi</shimmy-dialog>

enum DialogType {
    video = 1,
    iframe
};

@inject(Bcp, DialogController)
export class ShimmyDialogModel {
  private type : DialogType;

  constructor(private bcp: Bcp, private controller : DialogController){
    console.log("here");
  }

  async activate(state){
    this.type = state['type'];
  }

  get isVideo() : boolean {
    return this.type == DialogType.video;
  }

  get isIframe() : boolean {
    return this.type == DialogType.iframe;
  }
}

@noView
@processContent(false)
@customElement('shimmy-dialog') 
@inject(Element, App, Bcp, DialogService)
export class ShimmyDialog {
  @bindable public type : string;
  @bindable public href;
  @bindable public name;
  private originalContent : string;

  constructor(private element: Element, private app: App, private bcp: Bcp,
              private dialogService: DialogService) {    
    this.originalContent = this.element.innerHTML;
  }

  bind() {
    this.element.innerHTML = '<a href="#">' + this.originalContent + '</a>';
  }

  attached() {
    let self = this;
    this.type = this.element.getAttribute("type");
    let dialogType = DialogType[this.type];
    this.element.children[0].addEventListener("click", function(){ 
      if(dialogType == DialogType.iframe) {
        self.dialogService.open({ viewModel: ShimmyDialogModel, model: {'type' : dialogType}}).then(response => {
        });
      }
      else if(dialogType == DialogType.video) {
        self.dialogService.open({ viewModel: ShimmyDialogModel, model: {'type' : dialogType}}).then(response => {
        });
      }
      return false;
    });
  }

  async typeChanged(newValue) {
    this.type = newValue;
  }

  async hrefChanged(newValue) {
    this.href = newValue;
  }
}

<template>
  <require from="materialize-css/bin/materialize.css"></require>
  <ai-dialog>
    <ai-dialog-header>
    </ai-dialog-header>
    <ai-dialog-body>
      <div if.bind="isVideo">
          Video
      </div>
      <div if.bind="isIframe">
          IFrame
      </div>
    </ai-dialog-body>

    <ai-dialog-footer>
      <button click.trigger="controller.cancel()">Close</button>
    </ai-dialog-footer>
  </ai-dialog>
</template>