DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

開(kāi)發(fā)人員可以將DevExtreme UI組件與其他框架一起使用，而不僅僅是那些開(kāi)箱即用的框架(Angular、React、Vue等)，本文介紹如何使用DevExtreme UI組件，并在使用第三方框架時(shí)配置它們以支持模板和雙向綁定。

注意：本文中的所有示例都演示了如何在沒(méi)有集成jQuery的情況下使用DevExtreme UI組件，如果沒(méi)有鏈接jQuery庫(kù)或在DevExtreme腳本之后鏈接jQuery，則禁用該組件。

DevExtreme v22.2正式版下載

DevExpress技術(shù)交流群7：674691612      歡迎一起進(jìn)群討論

創(chuàng)建并配置一個(gè)UI組件

要?jiǎng)?chuàng)建一個(gè)UI組件、調(diào)用它的構(gòu)造函數(shù)、傳遞目標(biāo)元素和配置對(duì)象，開(kāi)發(fā)人員可能需要為目標(biāo)元素設(shè)置額外的屬性（例如，數(shù)據(jù)可視化UI組件的顯示屬性應(yīng)該設(shè)置為“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命名空間來(lái)訪問(wèn)大多數(shù)UI組件的構(gòu)造函數(shù)，例外的是數(shù)據(jù)可視化組件：、和所有類型的圖表和儀表，這些組件屬于DevExpress.viz命名空間。

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

更改組件屬性并處理事件

調(diào)用方法和訂閱事件需要特定的UI組件實(shí)例，調(diào)用UI組件類的靜態(tài)getInstance(element)方法來(lái)檢索現(xiàn)有的UI組件實(shí)例。

// 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);

開(kāi)發(fā)人員可以在運(yùn)行時(shí)使用option()方法獲取和設(shè)置UI組件屬性。

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

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

要訂閱事件，可以使用名稱以"on" 開(kāi)頭的屬性（例如，"onItemClick"）。

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

高級(jí)配置

指定UI組件的integrationOptions屬性來(lái)提供雙向綁定和模板支持。

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

integrationOptions配置對(duì)象包含以下字段：

• watchMethod：

該字段接受以下函數(shù)：

function(expressionGetter, callback, watchOptions)

Where

• expressionGetter - watched.Accepts表達(dá)式接受一個(gè)函數(shù)或字符串。
• callback - 在第一次設(shè)置watcher時(shí)調(diào)用回調(diào)，每次它檢測(cè)到在內(nèi)部求值循環(huán)中expressionGetter的值被更改時(shí)都調(diào)用回調(diào)。
• watchOptions - 包含兩個(gè)布爾字段的對(duì)象：
  • skipImmediate - 指定是否跳過(guò)第一個(gè)值比較。
  • deep - 指定觀察程序使用深度比較還是淺比較。
  • 該方法應(yīng)該返回一個(gè)函數(shù)，當(dāng)刪除與UI組件相關(guān)的監(jiān)視器時(shí)調(diào)用該函數(shù)。
• 模板（templates）

這個(gè)字段保存了UI組件初始化時(shí)添加的模板映射，項(xiàng)目鍵應(yīng)該與模板名稱相對(duì)應(yīng)，項(xiàng)目值應(yīng)該是包含呈現(xiàn)函數(shù)的對(duì)象。

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函數(shù)應(yīng)該返回一個(gè)包含渲染模板的HTML元素。

• createTemplate

處理自定義模板的函數(shù)，它接受HTML標(biāo)記或傳遞給UI組件的DOM節(jié)點(diǎn)。模板屬性，并返回帶有呈現(xiàn)函數(shù)的對(duì)象。

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

在某些情況下，模板會(huì)在運(yùn)行時(shí)刪除，例如當(dāng)項(xiàng)目更新時(shí)，要?jiǎng)h除分配給已刪除模板的資源，請(qǐng)?zhí)幚韉xremove事件。

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()方法來(lái)處理分配給它的資源。

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

注意：在dispose方法調(diào)用之后，與UI組件關(guān)聯(lián)的HTML元素保留在DOM中。如果還需要?jiǎng)h除元素，則使用本地API調(diào)用。

element.remove();