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組件的構造函數，例外的是數據可視化組件：、和所有類型的圖表和儀表，這些組件屬于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"）。

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

高級配置

指定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();