Question

Kendo UI template API可让您在JavaScript中使用template。这对于自定义autocomplete template非常有用。

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

在此demo code上，要将color的客户名称的substring更改为与搜索文本等效的autocomplete上的红色，您可以搜索{{1 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>',

但是，如果我无法使用$()＆＃34;搜索＆＃34;，我希望通过设置模板生成的函数范围来实现。有可能吗？

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`的范围？

1 个答案: