DevExtreme 和 Aurelia 集成

Question

DevExtreme 支持 angular 指令，如 this example page for dxDataGrid 所示。我怎样才能用 Aurelia 达到同样的效果？

集成示例：

Answer 1

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

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

Answer 2

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

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

http://stefan.96.lt

Answer 3

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

1) Create a new Aurelia app with aurelia-cli: au new

2) Install jquery: npm install jquery --save

3) Install 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'}]
        });

      }
    }

DevExtreme 和 Aurelia 集成

DevExtreme and Aurelia integration

devextreme

aurelia