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