4

在这个网站上——Kendo UI 的自动完成小部件文档——有一段我只理解部分的代码。

$(document).ready(function() {
var autocomplete = $("#customers").kendoAutoComplete({
    minLength: 1,
    dataTextField: "ContactName",
    headerTemplate: '<div class="dropdown-header">' +
            '<span class="k-widget k-header">Photo</span>' +
            '<span class="k-widget k-header">Contact info</span>' +
        '</div>',
    template: '<span class="k-state-default"><img src=\"../../content/web/Customers/#:data.CustomerID#.jpg\" alt=\"#:data.CustomerID#\" /></span>' +
              '<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>',
    dataSource: {
        transport: {
            read:{
                dataType: "jsonp",
                url: "http://demos.telerik.com/kendo-ui/service/Customers"
            }
        }
    },
    height: 370,
}).data("kendoAutoComplete");
});

这是我所理解的：这是一个标准的自动完成控件，它使用模板使小部件看起来更好一些。我了解模板的工作原理（主要是），并且我知道将它放在 .ready() 函数中会导致它在 DOM 加载时运行。

我不明白的是最后需要 jQuery 的 .data() 函数。为什么会在那里？我试图理解jQuery 文档，但似乎还有更深层次的事情发生。autocomplete此代码示例的其余部分未使用该变量，所以我想知道这是否是 Kendo 的错误。

.data() 函数将任意数据附加到 DOM 元素。剑道在多大程度上使用了这些任意数据？

4

1 回答 1

4

在您的示例中，您不需要它，因为您实际上不再使用autocomplete.

正如您所说，jQuerydata函数将任意数据附加到 DOM 元素，这正是 KendoUI 在创建任何小部件时所做的：任何需要的数据都附加到与小部件关联的 DOM 元素上，因此如果将来您需要进行一些操作使用小部件，您可以使用data.

示例：您创建了一个 Kendo Window，用户可以关闭它（这并不意味着销毁它，只是隐藏它）。如果将来您需要打开它，您只需执行$("#win-id").data("kendoWindow").open(). 如果您需要使用 that 进行许多操作window，而不必$("#win-id").data("kendoWindow")每次都执行：

var myWindow = $("#win-id").data("kendoWindow");

但有时你在创建它时会这样做：

var myWindow = $("#win-id").kendoWindow({}).data("kendoWindow");

这意味着您创建一个kendoWindow附加到 DOM 元素的 DOM 元素，id然后win-id通过执行.data("kendoWindow")它来获取对它的引用。

在您展示的代码中，这基本上就是他们所做的：创建一个autocomplete并获取对它的引用以供将来使用。

于 2014-03-12T21:54:58.677 回答