DevExtreme and Aurelia integration

问题

DevExtreme support angular directives as shown on this example page for dxDataGrid. How can I achieve the same with Aurelia?

Examples showing the integration:

https://www.youtube.com/watch?v=iIZj6hOFg0o
http://blog.falafel.com/getting-started-with-devexpress-and-angularjs/

回答1:

DevExtreme does not support integration with Aurelia out-of-the-box.

But you can try to create the Custom Elements for some DevExtreme widget.

回答2:

You may want to check out the work of Stefan Heim. He's created some prototype examples of DevExtreme/Aurelia integration. There's a GitHub repository and demo available:

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

http://stefan.96.lt

回答3:

The most basic scenario follows these steps:

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

Here is the tricky part...in aurelia_project open aurelia.json and add this to vendor-bundle.js dependencies (can also use dx.all):

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

Add the devextreme css to 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>

And then a simple example in app.js and app.html will look like this:

app.html

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

app.js

   export class App {

     attached() {

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

      }
    }

来源：https://stackoverflow.com/questions/31237680/devextreme-and-aurelia-integration

标签

aurelia

devextreme