2017-01-20 7 views
2

Я пытаюсь заставить мост Aurelia KendoUI работать, но он, кажется, ничего не делает: любой элемент, созданный мостом KendoUI, отображается только как базовый HTML, но не имеет кендо (например, выбор даты появляется как поле ввода, без выбора даты).Aurelia KendoUI Bridge ничего не делает

  • Я установил как KendoUI и Kendou UI моста в соответствии с инструкциями (через JSPM).
  • Я могу показать элементы Kendo в порядке «старого стиля», то есть с помощью $ (myElement) .kendoDatePicker ({...}). Поэтому я предполагаю, что проблема связана с конфигурацией моста, а не с кендо.
  • Мост имеет то, что я считаю, что правильные записи в config.js
  • Консоли подтверждает, что сам мост загрузится нормально, загрузили в общей сложности 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>

ответ

2

С вашим образцом выше, я воспроизвел gistrun example, который работает.

Единственное различие с кодом, в основном, что я удалил импорт:

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

Если вы не планирует использовать его в своих моделях .js, пожалуйста, не добавляйте его.

'Импортировать', как вы упомянули, documented in the TypeScript section. Значит, ты хорошо поработал. Но на практике, хотя, я считаю, что это должно быть так:

import 'kendo/js/kendo.datepicker'; 

По крайней мере, мой опыт при использовании приложения Aurelia CLI с машинопись и мостом Кендо UI. Неправильный импорт в мои файлы .ts будет воспроизводить описанное вами поведение.

+1

Спасибо, я ценю ваши мысли. Однако в моем случае путь к файлу кендо был действительно правильным. Реальное решение состояло из двух элементов: 1. «Увеличьте» вставленный шаблон Aurelia и 2. присоедините полученный результат. Я подготовил gist run, который показывает, как он работает: https://gist.run/?id=5d2ee91f2ce44aa42ef8de084771b4ba – bluewater

 Смежные вопросы

  • Нет связанных вопросов^_^