1

Kendo UI のテンプレート APIを使用するJavaScriptと、template. これは、オートコンプリート テンプレートをカスタマイズするのに役立ちます。

生成されたコードを実行すると、 のスコープthisはWindow オブジェクトです。_prevたとえば、値を使用して結果をカスタマイズするために、スコープをオートコンプリート インスタンスに設定したいと考えています。

このデモ コードcolorでは、お客様の名前の を検索テキストに相当する赤色に変更して、コード内でインスタンスsubstringを検索できます。指定されたサンプルで、プロパティを次のように変更するだけですautocompletetemplatetemplate

 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 に答える