1

Kendo UI 的模板 API允许您JavaScript在template. 这对于自定义自动完成模板很有用。

生成的代码运行时，作用域this为Window 对象。我想将范围设置为自动完成实例，例如，使用该_prev值来自定义结果。

在此演示代码中，要将color客户名称更改为红色，substring相当于搜索文本，您可以在代码中搜索autocomplete实例。template在给定的示例上，只需将template属性更改为

 template: 
    '<span class="k-state-default"><img src= \"../content/web/Customers/#:data.CustomerID#.jpg\" alt=\"#:data.CustomerID#\" /></span>' +
    '<span class="k-state-default">'+
    '# var searchText= $("\\#customers").data("kendoAutoComplete")._prev; #'+
    '# data.coloredName= '+
        '"<span style=\\"color:red;\\">"  '   +
         '+ data.ContactName.substring(0, searchText.length) +'   +
         '"</span>" + data.ContactName.substring(searchText.length);  #'+
        '<h3>#= data.coloredName #</h3>'+
        '<p>#: data.CompanyName #</p>'+
    '</span>',

但是，如果我不能使用$()“搜索”，我想通过设置模板生成的函数的范围来做到这一点。可能吗？

4

1 回答 1

1

有可能的：

var autocomplete = $("#customers").kendoAutoComplete({
   // standard options, not the template
}).data("kendoAutoComplete");

var templateHtml = 'your template html using "this" here ...';
// compile the template from the html
var compiledTemplate = kendo.Template.compile(templateHtml);
// bind the template function to whatever you want, e.g. the autocomplete
var boundTemplate = compiledTemplate.bind(autocomplete);
//  set the template on the widget
autocomplete.setOptions({
    template: boundTemplate
});

（演示）

请注意，您在上下文中可能拥有的任何属性都将被传递给模板的数据覆盖，因此您无法从外部范围访问这些属性（请参阅此处的模板函数结构）。

于 2015-02-24T02:01:46.517 回答