jquery-plugins - 将 Office UI Fabric 日期选择器与 Aurelia 一起使用时的问题

Question

我正在尝试将Office UI Fabric 日期选择器与我的 Aurelia 应用程序一起使用。根据提供的示例，我到目前为止所做的事情：

1. 围绕 datepicker 创建了一个自定义元素：

   • 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();
             }
         }
     }
     

2. datepicker 自定义元素的用法：

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

3. 在布局 html 页面中添加了 Office-Fabric 日期选择器库：

   <script src="~/Scripts/office-ui-fabric/Jquery.DatePicker.js"></script>
   

   这就是问题所在。据我了解，这个结构组件依赖于pickadate.js，并且在加载jquery 插件时require.js出错。我已尝试将代码替换为此处提供的 codepen 中的代码，但没有成功。我什至尝试在添加织物脚本之前直接添加脚本, 和，但再次没有成功。在所有情况下，我都会遇到相同的错误。Uncaught Error: Mismatched anonymous define() modulepickadate.jsJquery.DatePicker.jspickadate.jspicker.jspicker.date.js

我认为问题在于如何pickadate.js加载模块。需要您的帮助来解决这个问题。

Answer 1

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

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 () {});
});

到目前为止它似乎正在工作:)