界面控件DevExtreme中文使用指南——如何建構 & 應用模闆

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）建構互動式的Web應用程式，該套件附帶功能齊全的資料網格、互動式圖表小部件、資料編輯器等。

模闆允許您自定義DevExtreme UI元件，本文概述DevExtreme為實作和應用模闆提供的功能。

複制下面連結擷取新版DevExtreme v22.1：https://www.evget.com/product/3150/download

預設模闆

預設模闆基于資料源字段，可以通過從資料源對象中添加或删除特定字段來控制外觀。例如，List UI元件項的預設模闆包含文本、可見和禁用字段等，如果您将以下數組配置設定給UI元件項或dataSource屬性，第一項将被禁用，第二項将被隐藏，它們都将有文本，而第三項将呈現自定義标記：

JavaScript

function customMarkup() {
var d = document.createElement("div");
d.innerHTML = "<i>Oranges</i>";
return d;
}
var fruits = [
{ text: "Apples", disabled: true },
{ text: "Lemons", visible: false },
{ template: customMarkup }
];           

您可以使用支援預設模闆和自定義模闆的dxItem元件在标記中實作同樣的效果，在這種情況下，不要設定UI元件的dataSource屬性。

HTML

<div id="list">
<div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
<div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
<div data-options="dxItem: { }">
<i>Oranges</i>
</div>
</div>           

JavaScript

$(function() {
$("#list").dxList({/* ... */});
});           

預設模闆和其中可用的字段取決于UI元件。

自定義模闆

模闆作為屬性傳遞，其結尾是...Template（在jQuery, Angular,Vue中）或...Render/...Component (在React中)。

每個模闆都可以通路以下參數：

• data：資料源對象或具有特定于特定模闆的字段對象。
• index：集合中的項目從零開始的索引，僅在集合UI元件模闆中可用。
• element：一個jQuery元素，表示正在自定義的UI元件元素，僅當您使用jQuery時可用。

下面的代碼展示了如何聲明模闆并使用這些參數，段代碼為List UI元件聲明了一個itemTemplate：

index.js

$(function() {
$("#listContainer").dxList({
items: [
{ itemProperty: "someValue" },
// ...
],
itemTemplate: function (data, index, element) {
return index + " - " + data.itemProperty;

// ===== or using the "element" parameter =====
const $item = $("<div>").text(
index + " - " + data.itemProperty
);
element.append($item);
}
});
});           

注意：在元件的标記内，但在模闆元素之外聲明命名模闆，非命名模闆應該在模闆元素中聲明。

集合UI元件還支援單個項的模闆，如果使用單獨的模闆，不要指定UI元件的dataSource屬性。

index.js

$(function() {
$("#listContainer").dxList({
items: [{
template: function () {
return $("<i>").text("Item 1")
}
}, {
template: function () {
return $("<b>").text("Item 2")
}
},{
template: function () {
return $("<div>").append(
$("<span>").text("Item with nested component"),
$("<div>").dxButton({
text: "Click me"
})
)
}
}]
});
});           

第三方模闆引擎

可以使用第三方模闆引擎，但隻能使用jQuery. DevExtreme支援以下開箱即用的模闆引擎：

• Underscore
• JsRender
• Mustache
• Hogan
• Handlebars
• doT

要使用其中一個，将它的名稱傳遞給DevExpress.setTemplateEngine(name)方法：

HTML

<div id="list"></div>
<script type="text/html" id="itemTemplate">
<!-- your Underscore template -->
</script>           

JavaScript

DevExpress.setTemplateEngine("underscore");

$(function() {
$("#list").dxList({
// ...
itemTemplate: $("#itemTemplate")
});
})           

還可以使用其他模闆引擎，但在本示例中需要實作編譯和呈現模闆的函數，詳見DevExpress.setTemplateEngine(options) 。