我在创建将像
一样使用的自定义元素时遇到问题<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>
感谢您的帮助。
答案 0 :(得分:0)
我通过将类分成他们自己的文件来解决这个问题。 Aurelia不喜欢那里有两个出口课程。