在 Aurelia TypeScript 中创建剑道网格答案

【问题标题】：Creating Kendo Grid in Aurelia TypeScript在 Aurelia TypeScript 中创建剑道网格
【发布时间】：2016-06-03 07:52:13
【问题描述】：

我正在尝试使用 TypeScript 在 Aurelia 中使用 Kendo Grid，但是当我尝试初始化它时不断收到错误消息。

/// <reference path="../../../../vendors/Kendoui/typescript/kendo.all.d.ts" />

export class Test
{
    attached()
    {
        $("#grid").kendoGrid();
    }
}

我得到的错误是Unhandled rejection TypeError: $(...).kendoGrid is not a function

我做错了什么？

编辑

我曾考虑使用 Aurelia-Kendo-bridge，但出于性能原因，我选择不使用它。

【问题讨论】：

我写了一篇博客，您可能会对将第三方库集成到 Aurelia 感兴趣：davismj.me/blog/aurelia-drag-and-drop
你确定性能原因与桥有关，而不是剑道本身？如果是这样，我想知道您遇到了什么问题。免责声明：我是桥梁的维护者之一

标签： typescript kendo-grid aurelia

【解决方案1】：

看看 aurelia-kendoui-bridge 项目：https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge 这是他们组件目录中的一个示例：

<template>
  <ak-grid k-data-source.bind="datasource"
          k-pageable.bind="{ refresh: true, pageSizes: true, buttonCount: 10 }"
          k-sortable.bind="true">
    <!-- Column definitions in HTML -->
    <ak-col k-title="Contact Name" k-field="ContactName">
      <ak-template>
        <!-- Column templates directly in your markup - where they belong! -->
        <div class="customer-photo" style="background-image: url(../content/web/Customers/${CustomerID}.jpg);"></div>
        <!-- Use Aurelia binding features like interpolation, value converters and binding behaviors -->
        <div class="customer-name">${ContactName}</div>
      </ak-template>
    </ak-col>
    <ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
    <ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
    <ak-col k-field="Country"></ak-col>
  </ak-grid>
</template>

还有 ViewModel：

export class ViewModel {
  datasource = {
    type: 'odata',
    transport: {
      read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
    },
    pageSize: 5
  };
}

根据您最初的问题，您可能没有导入 Kendo。在视图模型文件的顶部放置一条导入语句：

import './path/to/kendo-ui.js';

【讨论】：

感谢 Manuel 的建议，我已经看过这个，甚至可以使用它，但由于性能问题，我暂时不会使用它。

【解决方案2】：

你是如何导入剑道的？我想使用 es2015 和 systemJS bu 后来切换到在我的索引页面中手动导入 js 文件。我不会导入所有的小部件，以减小尺寸。当然，按照我的方式这样做可能意味着 kendo 库将被预先加载，而不是在需要时加载。

【讨论】：