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

Question

KendoUI的template API lets you use JavaScript in the template. This is useful to customize the autocomplete template。

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

在这个demo code上，要在substring等同于搜索文字的color上把客户名字的color改成红色，可以搜索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>',

但是，如果我不能使用 $() "search"，我想通过设置模板生成的函数的范围来实现。可能吗？

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).

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

How to set the scope of `this`on Kendo UI's autocomplete template?

javascript

jquery

kendo-ui

kendo-autocomplete

kendo-template