界面控件DevExtreme中文使用指南——如何构建 & 应用模板
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
模板允许您自定义DevExtreme UI组件，本文概述DevExtreme为实现和应用模板提供的功能。
默认模板
默认模板基于数据源字段，可以通过从数据源对象中添加或删除特定字段来控制外观。例如，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支持以下开箱即用的模板引擎：
要使用其中一个，将它的名称传递给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) 。