Aurelia KendoUI Bridge沒有做任何事情

我想讓Aurelia KendoUI Bridge工作，但它看起來沒有任何作用：KendoUI Bridge創建的任何元素都只顯示爲基本HTML，但沒有kendo部分（例如日期選擇器只是作爲輸入框出現，沒有日期選擇器）。Aurelia KendoUI Bridge沒有做任何事情

我已經安裝兩個KendoUI和Kendou UI橋具體根據指令（經由JSPM）。
我可以使用$（myElement）.kendoDatePicker（{...}）顯示Kendo元素。因此，我認爲問題在於橋樑的配置，而不是劍道。
橋樑有什麼，我認爲是在config.js正確的條目
控制檯證實，橋身已加載OK，加載共有67個包裝和節目沒有錯誤。

我不知道還有什麼要尋找 - 任何最受歡迎的指針。謝謝！

的index.html：

<link rel="stylesheet" href="css/kendo/kendo.common.min.css"> 
 
<link rel="stylesheet" href="css/kendo/kendo.default.min.css"> 
 
<link rel="stylesheet" href="css/kendo/kendo.mobile.all.min.css"> 
 
<script src="js/kendo/jquery.min.js"></script> 
 
<script src="js/kendo/kendo.web.min.js"></script> 
 
<script src="js/kendo/kendo.datepicker.min.js"></script> 
 

 
<div aurelia-app="main" style="height: 100%"> 
 
    <div class="splash"> 
 
     <div class="message">Starting engine ...</div> 
 
     <i class="fa fa-cog fa-spin"></i> 
 
    </div> 
 
    <script src="jspm_packages/system.js"></script> 
 
    <script src="config.js"></script> 
 
    <script> 
 
     System.import('aurelia-bootstrapper'); 
 
    </script> 
 
</div>

main.js：

import 'bootstrap'; 
 
import {LogManager} from 'aurelia-framework'; 
 

 
    
 
export function configure(aurelia) { 
 

 
    aurelia.use 
 
     .standardConfiguration() 
 
     .developmentLogging() 
 
     .feature('./components') 
 
     .feature('./views') 
 
     .plugin('aurelia-computed') 
 
     .plugin('aurelia-kendoui-bridge', kendo => kendo.pro()); 
 

 
    aurelia.start().then(() => aurelia.setRoot()); 
 
}

個

customElement.js

import 'js/kendo/kendo.datepicker.min'; 
 

 
export class Countries { 
 

 
    bind() { 
 
     $('#datepicker').kendoDatePicker(); // this works as expected and shows a full kendo date picker 
 
    } 
 
}

customElement.html

<template> 
 
    
 
    <require from="aurelia-kendoui-bridge/datepicker/datepicker"></require> 
 

 
    <div id="example"> 
 
     <div class="k-content"> 
 
      <h4>Show e-mails from:</h4> 
 
      <input id="datepicker" style="width: 200px" /> <!-- works ok when setting the kendo widget in viewmodel --> 
 
      
 
      <input ak-datepicker="k-value.bind: '1/11/2016'" /> <!-- doesn't work, shows just the input box--> 
 
      <input ak-datepicker ak-datepicker.ref="datepicker" style="width: 100%" /> <!-- neither does this (also just the input box) --> 
 
     </div> 
 
    </div> 
 

 
</template>

來源

2017-01-20 bluewater

以上你的例子，我已經複製了一個gistrun example這是有效的。

與您的代碼唯一的區別是基本上，我已經刪除了導入：

import 'js/kendo/kendo.datepicker.min';

如果您不是在你的.js模型中使用的IT規劃，請不要添加。

正如你所提到的'導入'它是documented in the TypeScript section。所以你在那裏做得很好。但在實踐中，雖然，我認爲它需要是這樣的：

import 'kendo/js/kendo.datepicker';

至少，這是我的經驗，使用帶有打字稿和劍道UI橋的Aurelia路上CLI應用程序時。在我的.ts文件中導入錯誤將重現您提到的行爲。

來源

2017-01-28 15:40:40

謝謝，我感謝你的想法。但是，在我的情況下，kendo文件的路徑實際上是正確的。真正的解決方案包含兩個要素：1.「增強」插入的Aurelia模板並附加結果視圖。我準備了一份顯示其工作原理的要點：https：//gist.run/？id = 5d2ee91f2ce44aa42ef8de084771b4ba – bluewater

Aurelia KendoUI Bridge沒有做任何事情

回答

相關問題