Question

我试图让Aurelia KendoUI Bridge工作，但它似乎什么都不做：KendoUI Bridge创建的任何元素只显示为基本HTML但没有kendo部分（例如日期）选择器只显示为输入框，没有日期选择器。

我已经安装了KendoUI和Kendou UI Bridge 说明（通过jspm）。
我可以将剑道元素显示为“旧样式”，即使用$（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>

Answer 1

上面的示例，我已经复制了一个有效的gistrun example。

与您的代码的唯一区别基本上是我删除了导入：

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

如果您<。> 没有计划在.js模型中使用它，请不要添加它。

＆＃39;导入＆＃39;你提到的是documented in the TypeScript section。所以你在那里做得很好。但在实践中，我认为它必须是这样的：

import 'kendo/js/kendo.datepicker';

至少，这是我在使用带有TypeScript和Kendo UI桥的Aurelia CLI应用程序时的体验。在我的.ts文件中导入错误将重现您提到的行为。

Aurelia KendoUI Bridge没有做任何事

1 个答案: