将 Office UI Fabric datepicker 与 Aurelia 结合使用时出现的问题

Question

我正在尝试将 Office UI Fabric datepicker 与我的 Aurelia 应用程序一起使用。根据示例提供的这个我到目前为止所做的：

围绕日期选择器创建了一个自定义元素：

msfabric-date-picker.html:

<template>
  <div class="ms-DatePicker">
  ...
  </div>
</template>

msfabric-date-picker.ts:

export class MsfabricDatePickerCustomElement {
    static inject = [Element];

    constructor(public element: Element) {
    }

    attached() {
        var self = this;
        if ($.fn.DatePicker) {
            $(self.element).DatePicker();
        }
    }
}

日期选择器自定义元素的用法：

<require from="./msfabric-date-picker"></require>
....
<msfabric-date-picker if.bind="isDate"></msfabric-date-picker>

在布局 html 页面中添加了 Office-Fabric 日期选择器库：
```
<script src="~/Scripts/office-ui-fabric/Jquery.DatePicker.js"></script>
```
问题就在这里。据我所知，这个结构组件依赖于 pickadate.js, and there is require.js error of Uncaught Error: Mismatched anonymous define() module while loading the pickadate.js jquery plugin. I have tried replacing the code in Jquery.DatePicker.js with the one in the codepen as provided here，但没有成功。我什至尝试在添加 fabric 脚本之前直接添加 pickadate.js 脚本 picker.js 和 picker.date.js，但同样没有成功。在所有情况下，我都会遇到同样的错误。

我认为 problem 是 pickadate.js 模块的加载方式。需要您的帮助来解决这个问题。

Answer 1

最后我使用requireJs加载库而不是在我的HTML中添加<script src="~/Scripts/office-ui-fabric/Jquery.DatePicker.js"></script>，如下：

require.config({
    paths: {
        jquery: baseUrl + "/Scripts/jquery-2.1.4.min",
        "pickadate-legacy": baseUrl + "/Scripts/pickadate/legacy",
        picker: baseUrl + "/Scripts/pickadate/picker",
        pickadate: baseUrl + "/Scripts/pickadate/picker.date",
        officeUiFabric: baseUrl + "/Scripts/office-ui-fabric/jquery.fabric.min"
    },
    shim: {
        picker: ['jquery', 'pickadate-legacy'],
        pickadate: {
                deps: ['jquery', 'picker'],
                exports: 'DatePicker'
            },
        officeUiFabric: ['jquery', 'pickadate']
    }
});

require(["aurelia dependencies"], function (au) {
    require(['jquery', 'picker', 'pickadate', 'officeUiFabric'], function () {});
});

它现在似乎正在工作:)

将 Office UI Fabric datepicker 与 Aurelia 结合使用时出现的问题

Issues in using Office UI Fabric datepicker with Aurelia

jquery-plugins

requirejs

aurelia

pickadate

office-ui-fabric