DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316
开发人员可以将DevExtreme UI组件与其他框架一起使用，而不仅仅是那些开箱即用的框架(Angular、React、Vue等)，本文介绍如何使用DevExtreme UI组件，并在使用第三方框架时配置它们以支持模板和双向绑定。
注意：本文中的所有示例都演示了如何在没有集成jQuery的情况下使用DevExtreme UI组件，如果没有链接jQuery库或在DevExtreme脚本之后链接jQuery，则禁用该组件。
创建并配置一个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) WhereexpressionGetter- 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();
