如何在 Kendo UI 的自动完成模板上设置 `this` 的范围？

Question

Kendo UI 的template API 允许您在template 中使用JavaScript。这对于自定义autocomplete template 很有用。

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

在此demo code上，要将substring上的客户名称color更改为红色，相当于搜索文本，您可以在template代码中搜索autocomplete实例。在给定的示例中，只需将 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>',

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

Answer 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
});

(demo)

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