Aurelia视图模型在添加超链接标记后显示错误

时间:2018-06-15 09:28:25

标签: javascript aurelia aurelia-binding

我正在使用Aurelia Dialog Service进行模型弹出,当我在视图模型(模型弹出窗口)中使用超链接标记时,它显示错误消息:超出最大调用堆栈大小

以下是代码: -

HomePage.ts

import { autoinject, observable,PLATFORM } from 'aurelia-framework'; 
import { DialogController, DialogService } from 'aurelia-dialog';
import { PreviewWorkbook } from './../../components/preview-workbook/preview- workbook';
@autoinject
   constructor(private _lg: AppLogger, private _dlgs: DialogService,
     ) {  }
public PreviewMenu(e: Event): void { 
    this._dlgs.open({
        viewModel:  PreviewWorkbook, model: Workbooks
    }).whenClosed(rsp => {
        this._lg.log("Preview Menu Cancelled");
    });
}

当我点击homepage.html中的PreviewMenu()时,我收到以下错误

in console

PreviewWorkbook HTML页面: -

<template>
<ux-dialog>
    <ux-dialog-header>
       Preview WorkBook
    </ux-dialog-header>
    <ux-dialog-body>
        <div repeat.for="workbook of workbooks">
            <a href="${workbook.Link}"> ${workbook.Name} </a>
        </div>          
    </ux-dialog-body>
    <ux-dialog-footer>
        <button class="btn btn-info" click.delegate="save()">Save</button>
        <button class="btn btn-default" click.delegate="cancel()">Cancel</button>
    </ux-dialog-footer>
</ux-dialog>

如果我只使用ul,li来绑定它正常工作的值。

1 个答案:

答案 0 :(得分:2)

在对话框主体中添加锚标记会导致无限循环或超出最大调用堆栈大小。

解决方案:

在HomePage.ts

我尝试通过在构造函数中添加以下行来修改代码:

constructor(private controller: DialogController) {
PLATFORM.moduleName('./../../components/preview-workbook/preview-Workbook');
}

所以在HomePage.ts

import { autoinject, observable,PLATFORM } from 'aurelia-framework'; 
import { DialogController, DialogService } from 'aurelia-dialog';
import { PreviewWorkbook } from './../../components/preview-workbook/preview-Workbook';
@autoinject
constructor(private _lg: AppLogger, private _dlgs: DialogService) {
PLATFORM.moduleName('./../../components/preview-workbook/preview-Workbook');
}
    public PreviewMenu(e: Event): void { 
    this._dlgs.open({
    viewModel:  PreviewWorkbook, model: Workbooks
}).whenClosed(rsp => {
    this._lg.log("Preview Menu Cancelled");
});
}