B/S端界面控件DevExtreme中文使用指南——如何集成第三方框架API

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

开发人员可以将DevExtreme UI组件与其他框架一起使用，而不仅仅是那些开箱即用的框架(Angular、React、Vue等)，本文介绍如何使用DevExtreme UI组件，并在使用第三方框架时配置它们以支持模板和双向绑定。

注意：本文中的所有示例都演示了如何在没有集成jQuery的情况下使用DevExtreme UI组件，如果没有链接jQuery库或在DevExtreme脚本之后链接jQuery，则禁用该组件。

DevExtreme v22.2正式版下载

DevExpress技术交流群7：674691612      欢迎一起进群讨论

创建并配置一个UI组件

要创建一个UI组件、调用它的构造函数、传递目标元素和配置对象，开发人员可能需要为目标元素设置额外的属性（例如，数据可视化UI组件的显示属性应该设置为“block”）。

import Accordion from "devextreme/ui/accordion";
...
let container = document.getElementById("root");
let element = document.createElement("div");
container.appendChild(element);
let instance = new Accordion(element, options);
...

如果不使用模块，可以使用DevExpress.ui命名空间来访问大多数UI组件的构造函数，例外的是数据可视化组件：VectorMap、RangeSelector和所有类型的图表和仪表，这些组件属于DevExpress.viz命名空间。

let instance = new DevExpress.ui.dxAccordion(element, options);
let dataVizInstance = new DevExpress.viz.dxPolarChart(element, options);

更改组件属性并处理事件

调用方法和订阅事件需要特定的UI组件实例，调用UI组件类的静态getInstance(element)方法来检索现有的UI组件实例。

// Modular approach
import Accordion from "devextreme/ui/accordion";
...
let element = document.getElementById("myAccordion");
let instance = Accordion.getInstance(element) as Accordion;

// Non-modular approach:
let element = document.getElementById("myAccordion");
let instance = DevExpress.ui.dxAccordion.getInstance(element);

开发人员可以在运行时使用option()方法获取和设置UI组件属性。

// Get a property value
let isVisible = instance.option("visible");

// Set a property value
instance.option("visible", false);

要订阅事件，可以使用名称以"on" 开头的属性（例如，"onItemClick"）。

Accordion(element, {
...,
onItemClick: function(e){
alert("An item is clicked!");
}
})

或者，您可以使用"on()"方法。

instance.on("itemClick", function(e){
alert("An item is clicked!");
})

高级配置

指定UI组件的integrationOptions属性来提供双向绑定和模板支持。

DevExpress.ui.dxAccordion(element, {
...
integrationOptions: {
watchMethod: ...
templates: ...
createTemplate: ...
}
})

integrationOptions配置对象包含以下字段：

• watchMethod：

该字段接受以下函数：

function(expressionGetter, callback, watchOptions)

Where

• expressionGetter - watched.Accepts表达式接受一个函数或字符串。
• callback - 在第一次设置watcher时调用回调，每次它检测到在内部求值循环中expressionGetter的值被更改时都调用回调。
• watchOptions - 包含两个布尔字段的对象：
  • skipImmediate - 指定是否跳过第一个值比较。
  • deep - 指定观察程序使用深度比较还是浅比较。
  • 该方法应该返回一个函数，当删除与UI组件相关的监视器时调用该函数。
• 模板（templates）

这个字段保存了UI组件初始化时添加的模板映射，项目键应该与模板名称相对应，项目值应该是包含呈现函数的对象。

templates: {
itemTemplate: {
render: function (renderData){
// 'renderData' includes the following fields:
// 'model' - data to be applied on markup
// 'itemIndex' - index of item in collection (or id in hierarchical collections)
// 'container' - append rendered markup to this element
...
}
}
}

render函数应该返回一个包含渲染模板的HTML元素。

• createTemplate

处理自定义模板的函数，它接受HTML标记或传递给UI组件的DOM节点。模板属性，并返回带有呈现函数的对象。

createTemplate: function(source) {
var template = Hogan.compile(source);
return {
render: function(args) {
return template.render(args.data);
}
};
}

在某些情况下，模板会在运行时删除，例如当项目更新时，要删除分配给已删除模板的资源，请处理dxremove事件。

integrationOptions: {
templates: {
"item": {
render: function(args) {
var div = document.createElement("div");
new Button(div ,{
text: args.model
});
var intervalId = setInterval(function() {
console.log(args.model);
}, 500);
DevExpress.events.on(div, "dxremove", function() {
clearInterval(intervalId);
});
args.container.appendChild(div);
return div;
}
}
}
}

移除UI组件

使用UI组件的dispose()方法来处理分配给它的资源。

let element = document.createElement("div");
let instance = new Accordion(element, options);
...
instance.dispose();

注意：在dispose方法调用之后，与UI组件关联的HTML元素保留在DOM中。如果还需要删除元素，则使用本地API调用。

element.remove();

更多DevExpress线上公开课、中文教程资讯请上中文网获取