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())"