B/S端界面控件DevExtreme中文使用指南——如何集成第三方框架API
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的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();
