Aurelia Custom element with dialog

Question

I am having trouble with creating a custom element that will be used like

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

The custim element will replace this code with a href that when clicked should popup a dialog of a particular type.

Everything seems to work up until the point I try to open the dialog. This is when I get the error

Unhandled rejection TypeError: Cannot set property 'bindingContext' of null I do sometimes find the Aurelia errors a little cyptic.

I suspect it has something todo with the element not having a view.

The code is as follows

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;
  }
}

The template for the dialog is below.

<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>

Thanks for any help.

Answer 1

I solved this by seperating the classes into their own files. Aurelia did no like having two export classes there.