Question

我開始在我的項目中使用Kendo-UI，我希望我的一列顯示圖像按鈕和字段，類似於文檔here中的「聯繫人姓名」。然後我正在檢查文檔，並得到如下代碼。

columns: [{ 
 
        template: "<div class='customer-photo'" + 
 
            "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" + 
 
           "<div class='customer-name'>#: ContactName #</div>", 
 
        field: "ContactName", 
 
        title: "Contact Name", 
 
        width: 240 
 
       }, { 
 
        field: "ContactTitle", 
 
        title: "Contact Title" 
 
       }, { 
 
        field: "CompanyName", 
 
        title: "Company Name" 
 
       }, { 
 
        field: "Country", 
 
        width: 150 
 
       }]

我不認爲在模板編寫HTML直接是一個很好的方式，尤其是一個非常複雜的模板。然後我從文檔中找到了另一個解決方案。

"template": "kendo.template($('comments-template').html())" 

這在我的情況下更明智。但我很困惑在哪裏定義模板更好。我也使用AngularJS。我應該創建一個新文件來編寫模板還是其他地方？

感謝

Answer 1

的columns.template屬性需要一個字符串或返回一個字符串的函數。您可以使用一個<script>代碼在HTML標記...

<script id="script-template-id" type="text/x-kendo-template"> 
    <div class="myClass">#: FieldName #</div> 
</script> 

... 

<script> 
// ... 

columns: [{ 
    title: "My Template Column", 
    template: $('#script-template-id').html() 
}] 

// ... 
</script> 

...或使用，無論你喜歡的是定義一個字符串變量，包括外部JavaScript文件（假設將被登錄夠早該變量是可用）：

var templateStringVariable = '<div class="myClass">#: FieldName #</div>'; 

// ... 

columns: [{ 
    title: "My Template Column", 
    template: templateStringVariable 
}] 

注意，這個語法是行不通的，因爲JavaScript代碼本身是字符串化：

"template": "kendo.template($('comments-template').html())"