DevExtreme 和 Aurelia 集成答案

【问题标题】：DevExtreme and Aurelia integrationDevExtreme 和 Aurelia 集成
【发布时间】：2015-07-06 04:12:23
【问题描述】：

DevExtreme 支持 angular 指令，如 this example page for dxDataGrid 所示。如何使用 Aurelia 实现相同的目标？

显示集成的示例：

【问题讨论】：

标签： aurelia devextreme

【解决方案1】：

DevExtreme 不支持与开箱即用的 Aurelia 集成。

但您可以尝试为某些 DevExtreme 小部件创建 Custom Elements。

【讨论】：

Aurelia 自定义元素是否等同于指令或 HTML Web 组件？
据此article：Custom elements are web components that need to be imported or composed to use.
我的理解是自定义元素遵循 html Web 组件标准，我找不到任何参考资料，但我确信它已在各种演示文稿中提及。
希望 DevExpress 或 MVC 6 或 Telerik Kendo 有适用于 Aurelia 的适配器。他们都支持 Angular。
@wonderfulworld：剑道的 Aurelia 绑定现已推出：blog.durandal.io/2016/01/28/aurelia-and-kendo-ui

【解决方案2】：

您可能想查看 Stefan Heim 的作品。他创建了一些 DevExtreme/Aurelia 集成的原型示例。有一个 GitHub 存储库和可用的演示：

https://github.com/stenet/aurelia-devextreme

http://stefan.96.lt

【讨论】：

【解决方案3】：

最基本的场景遵循以下步骤：

1) 使用 aurelia-cli 创建一个新的 Aurelia 应用：au new

2) 安装jquery：npm install jquery --save

3) 安装 devextreme：npm install devextreme --save

这是棘手的部分...在 aurelia_project 打开 aurelia.json 并将其添加到 vendor-bundle.js 依赖项（也可以使用 dx.all）：

      {
        "name": "devextreme",
        "path": "../node_modules/devextreme/dist",
        "main": "js/dx.web"
      }

将 devextreme css 添加到 index.html：

  <head>
    ...
    <!-- DevExtreme themes -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" />
    ...
  </head>

然后 app.js 和 app.html 中的一个简单示例将如下所示：

app.html

    <template> 
        <div id="grid"></div>
    </template>

app.js

   export class App {

     attached() {

        $('#grid').dxDataGrid({
           dataSource: [{id: 1, name: 'Test'}]
        });

      }
    }

【讨论】：