这篇博客文章将演示IgGrid在Aurelia应用程序中的用法，但这些步骤适用于所有Ignite UI小部件。

Aurelia努力为用户提供多种构建Aurelia应用程序的方法。这将是最流行的一个演练-使用Aurelia CLI创建一个项目。

先决条件

这是具有要求的列表:

一旦先决条件可用，就可以创建一个新的Aurelia项目。

Aurelia提供在ESNext或TypeScript中编写应用程序，此博客文章使用默认的ESNext。另请注意，如果您不想在每次更改时重新运行项目，则可以键入au run-watch。

构建IgGrid组件

让我们构建ViewModel。转到src文件夹，并创建一个包含以下内容的文件ig-grid.js:

 导入 {bindable，inject} 从 'aurelia-framework';

 导入 '../igniteui/js/infragistics.lob';

 @ inject (元素)

 导出类IgGrid {

 @ bindable选项;

 @ 可绑定id;

 构造函数 (element) {

 这个。element = element;

 附件 () {

 var grid = $ (此.element).find('table');

 // 设置网格

的id

 grid.attr (“id”，this.id);

 // 初始化小部件

 grid.igGrid (此.options);

ViewModel有两个可绑定属性，它们将作为属性填充。若要实现属性和类的属性之间的绑定，应使用 @ bindable装饰器装饰该属性。第一个属性选项用于指定网格配置，第二个是要在其上初始化小部件的HTML元素的id属性。

Aurelia依赖注入提供了从视图 (table HTML元素) 引用模板的机会。此元素被注入到构造函数中并存储。

之后，为了确保组件附加到DOM进行初始化，使用附加的生命周期回调。

该视图用于指定在其上初始化igGrid的HTML元素。

创建包含以下内容的ig-grid.html文件:

为了使用我们已经构建的组件，请转到应用程序模板-app.html; 并在其中要求并初始化组件:

现在应该在app.js文件中定义opts和id:

 导出类应用程序 {

 构造函数 () {

 这个。message = 'Ignite UI igGrid与Aurelia';

 this.id = "grid1";

 这个.opts = {

 标题: “Angular2”，

 primaryKey: "Id"，

 数据源: [

 { "Id": 1，"Name": "John Smith"，"Age": 45}，

 { "Id": 2，"Name": "Mary Johnson"，"Age": 32}，

 {“Id”: 3，“Name”: “Bob Ferguson”，“Age”: 27 }

 ]，

 列: [

 {{headerText: "Id"，key: "Id"，数据类型: "number"，hidden: true },<

 { headerText: "Name"，key: "Name"，dataType: "string"}，

 { headerText: "Age"，key: "Age"，dataType: "number" }

 ]，

};

最后点燃UI脚本应该包括在内。从这里下载它们并将它们包含到项目中。对于此演示，我们创建了 “igniteui” 文件夹，其中Ignite UI产品位于该文件夹中，并在ViewModel中导入了infragistics.lob.js文件，该文件依赖于:

我们需要解决的是jQuery和jQuery UI包。

作为devDependencies包含到package.json中:

 "jquery": "1.12.4"，

 “jquery-ui-dist”: “1.12.1”

为了捆绑所有这些，将它们作为依赖项放在aurelia.json文件中，该文件是aurelia_project文件夹:

 “jquery”，

 "name": "jquere-ui"，

 "path": "../node_modules/jquere-ui-dist"，

 "main": "jquery-ui.min"

相同的规则适用于任何Ignite UI小部件，所有这些都可以集成在Aurelia应用程序中。

现在您已准备好运行应用程序并查看igGrid，在控制台中输入au run。

下载演示。

运行演示的步骤: