0

我正在尝试将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加载模块。需要您的帮助来解决这个问题。

4

1 回答 1

0

最后我使用 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 () {});
});

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

于 2015-10-13T15:22:01.277 回答