jQuery's .data()函数在剑道UI中的作用是什么?

What purpose does jQuery's .data() function serve in the Kendo UI?

本文关键字：UI 是什么 作用 函数 data jQuery      更新时间：2023-09-26

在这个网站上——剑道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元素。剑道在多大程度上使用了这些任意数据?

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

正如你所说，jQuery data函数将任意数据附加到DOM元素，这正是KendoUI在创建任何小部件时所做的:任何需要的数据，都是附加到与小部件相关的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附加到一个DOM元素，id是win-id，然后你通过执行.data("kendoWindow")得到对它的引用。

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

相关文章：