在Aurelia应用程序中绑定FullCalendar时超过了最大调用堆栈大小

Question

我正在尝试初始化Aurelia、TypeScript驱动的应用程序中的JQuery插件(FullCalendar)。我是网络开发的新手，只是想让一个最小的例子发挥作用。我使用这个模板作为起点。

我遵循了这个片段中建议的结构。我似乎至少能够进行初始化，但随后某种无限递归/循环不断调用我的构造函数：

aurelia-logging-console.js:47 ERROR [app-router] Error: Error invoking calendar. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: Maximum call stack size exceeded
Inner Error Stack:
RangeError: Maximum call stack size exceeded
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6683:43)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
End Inner Error Stack 

建议的将FullCalendar作为require from包含在内的修复方法也不起作用，无论是作为@inlineView还是直接在我的View(html):中

@inlineView('<template><require from="../../../../node_modules/fullcalendar/dist/fullcalendar.css"></require><require from="../../../../node_modules/fullcalendar"></require></template>') 

然后我从我的ASP.Net服务中得到以下错误(似乎是WebPack配置问题)：

Microsoft.AspNetCore.NodeServices:Error: C:Users***AureliaDotnetTemplatenode_modulesaurelia-webpack-plugindistPreserveModuleNamePlugin.js:145
throw new Error("PreserveModuleNamePlugin: Unable to find root of module " + name);

我的ViewModel(calendar.ts)：

import {
autoinject, inject, bindable, bindingMode,
customElement, BindingEngine
} from 'aurelia-framework';
import * as $ from "jquery";
import * as moment from "moment";
import * as fullCalendar from 'fullcalendar';
@customElement('calendar')
@autoinject
export class calendar {
@bindable weekends = true;
@bindable dayClick;
@bindable eventClick;
@bindable events = [];
@bindable options;
@bindable view;
subscription = null;
calendar: any;
constructor(private element: Element, private bindingEngine: BindingEngine) {
this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe((splices) => { this.eventListChanged(splices) });
}
eventListChanged(splices) {
if (this.calendar)
this.calendar.fullCalendar('refetchEvents');
}
eventsChanged(newValue) {
if (this.subscription !== null) {
this.subscription.dispose();
}
this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe((splices) => { this.eventListChanged(splices) });
if (this.calendar)
this.calendar.fullCalendar('refetchEvents');
}
attached() {
console.log('calendar attached');
console.log(this.element);
console.log($(this.element));
this.calendar = $(this.element);
let eventSource = (start, end, timezone, callback) => {
callback(this.events);
}
let defaultValues = {
defaultView: this.view || 'month',
weekends: this.weekends,
firstDay: 1,
dayClick: (date, jsEvent, view) => this.dayClick(date, jsEvent, view),
eventClick: (event) => this.eventClick(event),
events: eventSource
}
this.calendar.fullCalendar(Object.assign(defaultValues, this.options));
}
} 

和我的视图(calendar.html)：

<template>
<h1>Calendar</h1>
<calendar></calendar>
</template>

编辑：根据Rory的建议，我试图删除事件处理程序以显示最小的代码片段，但这并没有帮助，因为我仍然得到了相同的异常。我认为问题出在装订上？

import {
autoinject, inject, bindable,
customElement
} from 'aurelia-framework';
import * as $ from "jquery";
import * as moment from "moment";
import * as fullCalendar from 'fullcalendar';
@autoinject
@customElement('calendar')
export class calendar {
@bindable weekends = true;
@bindable dayClick;
@bindable eventClick;
@bindable events = [];
@bindable options;
@bindable view;
subscription = null;
calendar: any;
constructor(private element: Element) {}
attached() {
console.log('calendar attached');
console.log(this.element);
console.log($(this.element));
this.calendar = $(this.element);
let eventSource = (start, end, timezone, callback) => {
callback(this.events);
}
let defaultValues = {
defaultView: this.view || 'month',
weekends: this.weekends,
firstDay: 1,
dayClick: (date, jsEvent, view) => this.dayClick(date, jsEvent, view),
eventClick: (event) => this.eventClick(event),
events: eventSource
}
this.calendar.fullCalendar(Object.assign(defaultValues, this.options));
}
} 

Answer 1

在您的日历自定义元素模板中，您有另一个日历自定义元素，它创建了日历的无限循环。我不确定你的意图是什么，但最简单的解决方法是将模板中的日历更改为其他名称