爲kendo網格欄模板調用外部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變量？ $ {地址}分配似乎不起作用。
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源代碼，否則你可能必須硬編碼名稱（因爲當前列的屬性名稱不會傳遞給模板）。