Kendo模板传变量至JS函数设图标遇加载异常，求可行方案

你遇到的无限加载问题，根源在于Kendo模板的表达式嵌套错误——你在#=输出表达式里又套了一层#=，这会让模板解析器陷入混乱，进而引发加载异常。咱们一步步来解决：

一、修复当前写法的错误 #

你原来的写法#=addFileExtensionIcon(#=DocType#)#是不对的，Kendo模板中，#=已经是用来输出表达式结果的标记，内部传递变量时直接写变量名即可，不需要再用#=包裹。

正确的模板代码 #

@*//WF ITEM ATTACHMENTS TEMPLATE*@
<script id="itemAttachmentsTemplate" type="text/x-kendo-template">
 <div class="attachment">
 <span class='k-icon #=addFileExtensionIcon(DocType)#'></span>
 <h3>FILE NAME</h3>
 <h3>#=DocType#</h3>
 <h3>#=CreatedByUserName#</h3>
 <div class="btn btn-link">
 <span class="k-icon k-i-download"></span>
 </div>
 </div>
</script>

额外注意：函数返回值的格式 #

另外要检查你的addFileExtensionIcon函数——返回的类名前面带了.，但Kendo的图标类本身是不带点的（比如k-i-image而非.k-i-image），这样会导致最终class变成k-icon .k-i-image，浏览器无法正确识别样式。建议修改函数返回值：

function addFileExtensionIcon(extension) {
 switch (extension) {
 case '.jpg':
 case '.img':
 case '.png':
 case '.gif':
 return "k-i-image"; // 去掉前面的.
 case '.doc':
 case '.docx':
 return "k-i-file-doc";
 case '.xls':
 case '.xlsx':
 return "k-i-file-xls";
 case '.pdf':
 return "k-i-file-pdf";
 case '.zip':
 case '.rar':
 return "k-i-file-zip";
 default:
 return "k-i-file";
 }
}

二、替代方案 #

如果不想在模板里直接调用函数，还有两种常用的思路：

方案1：预处理数据源，提前计算图标类 #

在绑定数据前，给每个数据项添加一个iconClass字段，把图标类提前计算好，模板直接使用即可：

// 假设你的原始数据源是dataList
const processedData = dataList.map(item => {
  return {
    ...item,
    iconClass: addFileExtensionIcon(item.DocType)
  };
});

// 绑定组件时使用处理后的数据源
$("#attachmentListView").kendoListView({
  dataSource: processedData,
  template: $("#itemAttachmentsTemplate").html()
});

对应的模板简化为：

<span class='k-icon #=iconClass#'></span>

这种方式把逻辑从模板中剥离，让模板更简洁，适合数据量不大的场景。

方案2：在模板中用代码块定义变量 #

可以用#包裹代码块，先计算出图标类，再在后续输出中使用：

<script id="itemAttachmentsTemplate" type="text/x-kendo-template">
 <div class="attachment">
 # 先计算图标类，存在变量里 #
 # var iconClass = addFileExtensionIcon(DocType); #
 <span class='k-icon #=iconClass#'></span>
 <h3>FILE NAME</h3>
 <h3>#=DocType#</h3>
 <h3>#=CreatedByUserName#</h3>
 <div class="btn btn-link">
 <span class="k-icon k-i-download"></span>
 </div>
 </div>
</script>

这种方式适合需要在模板内做更多逻辑处理的场景，可读性更强。

内容的提问来源于stack exchange，提问作者Ray Koren