使用Office UI Fabric datepicker與Aurelia相關的問題

Question

我試圖在我的Aurelia應用中使用Office UI Fabric datepicker。根據所提供的示例中，這是我迄今所做的：

1. 附近創造了日期選擇器自定義元素：

   • 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. 使用日期選擇器自定義元素的：

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

3. 添加在佈局HTML頁面廳織物日期選擇器庫：

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

   而這就是問題。據我所知，這個結構組件取決於pickadate.js，並有require.js錯誤Uncaught Error: Mismatched anonymous define() module而加載的pickadate.js jquery插件。我試圖用提供的codepen中的代碼替換Jquery.DatePicker.js中的代碼，但沒有成功。我甚至嘗試在添加結構腳本之前直接添加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() {}); 
}); 

這似乎是工作，截至目前:)使用全庫的jQuery