Question

我在创建将像

一样使用的自定义元素时遇到问题

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

custim元素将用href替换此代码，点击后应弹出特定类型的对话框。

在尝试打开对话框之前，一切似乎都有效。这是我收到错误

未处理拒绝TypeError：无法设置属性＆＃39; bindingContext＆＃39;为null 我有时会发现Aurelia错误有点消极。

我怀疑这个元素没有视图。

代码如下

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>

感谢您的帮助。

Answer 1

我通过将类分成他们自己的文件来解决这个问题。 Aurelia不喜欢那里有两个出口课程。

Aurelia自定义元素与对话框

1 个答案: