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

Question

我正在尝试初始化一个 JQuery 插件（FullCalendar) inside my Aurelia, TypeScript-driven app. I am new to web developement and just trying to get a minimal example to work. I used this template 作为起点。

我遵循了 this snippet 中建议的结构。我似乎至少能够进行初始化，但随后某种无限 recursion/loop 不断调用我的构造函数：

    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 还是直接在我的视图中 (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\***\AureliaDotnetTemplate\node_modules\aurelia-webpack-plugin\dist\PreserveModuleNamePlugin.js:145
throw new Error("PreserveModuleNamePlugin: Unable to find root of module " + name);

我的视图模型（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

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

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

Maximum call stack size exceeded when binding FullCalendar in Aurelia app

jquery

fullcalendar

typescript

webpack

aurelia