Question

在this website - 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（）函数。为什么会这样？我试图理解the jQuery documentation，但看起来还有更深层次的事情。变量autocomplete未在此代码示例的其余部分中使用，因此我想知道这是否是Kendo的错误。

.data（）函数将任意数据附加到DOM元素。剑道在多大程度上使用这种任意数据？

Answer 1

在您的示例中，由于您实际上不再使用autocomplete，因此您不需要它。

正如你所说，jQuery data函数将任意数据附加到DOM元素，这正是KendoUI在创建任何Widget时所做的事情：所需的任何数据都是附加到与窗口小部件关联的DOM元素，因此如果将来需要对窗口小部件执行某些操作，可以使用data获取对它的引用。

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

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

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

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

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

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

jQuery的.data（）函数在Kendo UI中的作用是什么？

1 个答案: