B/S端界面控件DevExtreme中文使用指南——如何构建 & 应用模板

本文主要介绍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支持以下开箱即用的模板引擎：

• 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) 。

DevExpress技术交流群6：600715373      欢迎一起进群讨论

更多DevExpress线上公开课、中文教程资讯请上中文网获取

来源：慧都