DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。
模板允許您自定義DevExtreme?UI組件，本文概述DevExtreme為實(shí)現(xiàn)和應(yīng)用模板提供的功能。
DevExtreme v22.1正式版下載
默認(rèn)模板
默認(rèn)模板基于數(shù)據(jù)源字段，可以通過從數(shù)據(jù)源對象中添加或刪除特定字段來控制外觀。例如，List UI組件項的默認(rèn)模板包含文本、可見和禁用字段等，如果您將以下數(shù)組分配給UI組件項或dataSource屬性，第一項將被禁用，第二項將被隱藏，它們都將有文本，而第三項將呈現(xiàn)自定義標(biāo)記：
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 }
];您可以使用支持默認(rèn)模板和自定義模板的dxItem組件在標(biāo)記中實(shí)現(xiàn)同樣的效果，在這種情況下，不要設(shè)置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({/* ... */});
});默認(rèn)模板和其中可用的字段取決于UI組件。
自定義模板
模板作為屬性傳遞，其結(jié)尾是...Template（在jQuery, Angular,Vue中）或...Render/...Component (在React中)。
每個模板都可以訪問以下參數(shù)：
- data：數(shù)據(jù)源對象或具有特定于特定模板的字段對象。
- index：集合中的項目從零開始的索引，僅在集合UI組件模板中可用。
- element：一個jQuery元素，表示正在自定義的UI組件元素，僅當(dāng)您使用jQuery時可用。
下面的代碼展示了如何聲明模板并使用這些參數(shù)，段代碼為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);
}
});
});注意：在組件的標(biāo)記內(nèi)，但在模板元素之外聲明命名模板，非命名模板應(yīng)該在模板元素中聲明。
集合UI組件還支持單個項的模板，如果使用單獨(dú)的模板，不要指定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文章來源：http://www.zghlxwxcb.cn/news/detail-476159.html
DevExpress.setTemplateEngine("underscore");
$(function() {
$("#list").dxList({
// ...
itemTemplate: $("#itemTemplate")
});
})還可以使用其他模板引擎，但在本示例中需要實(shí)現(xiàn)編譯和呈現(xiàn)模板的函數(shù)，詳見DevExpress.setTemplateEngine(options)?。文章來源地址http://www.zghlxwxcb.cn/news/detail-476159.html
到了這里，關(guān)于界面控件DevExtreme中文使用指南——如何構(gòu)建 & 應(yīng)用模板的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
