为剑道网格列模板调用外部 html 模板

Question

我已经尝试了很长时间才能让它工作..

基本上，我将列和模板动态分配给剑道网格。每列可以是任何类型。如果类型是“地址”类型，那么我将为该列分配一个 html 模板以拆分地址字符串并以一种很好的方式显示。

我通过创建可能的列类型及其相应模板的映射来做到这一点。问题出在“地址”地图上。

 uiTemplateMap["date"] = "#= kendo.toString(kendo.parseDate(" + fieldName + "), 'MM/dd/yyyy') #";
 uiTemplateMap["address"] = eval("kendo.template($('\\#address-template').html())");

“地址模板”定义为

 <script id="address-template" type="text/x-kendo-template">
    # var addr =  ${addresses} ; #
    # var splitaddr = addr.split(','); #
    # for (int i=0; i < splitaddr.length(); i++) { #
        <i> #= splitaddr[i] # </i>
    # } #
 </script>

我得到一个无效的模板异常。我有两个问题。

1. 如何将列值分配给 javascript 变量？ ${addresses} 分配似乎不起作用。
2. 我不想硬编码模板中的“地址”列。我可以将列名或值传递给 $('#address-template').html(columnName) 之类的模板吗？？

任何帮助将不胜感激，谢谢

Answer 1

您可以访问data[columnName] 中的列值，其中columnName 是字段的名称（字符串），或者，因为模板函数使用with 块，只需在columnName 中，因此您可以定义像这样的模板生成器：

function createAddressTemplateFor(columnName) {
    return "# var address = data['" + columnName + "']; #" + // or: var address = columnName;
        "# var splitaddr = address.split(','); #" +
        "# for (var i = 0; i < splitaddr.length; i++) { #" +
        "<i> #= splitaddr[i] # </i><br />" +
        "# } #";
}

(demo)

如果您想使用外部模板，您可能必须对名称进行硬编码（因为当前列的属性名称不会传递给模板），除非您想修改 Kendo UI 源代码。