Javascript-剑道用户界面中jQuery的.data()函数起什么作用？

在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元素.剑道在多大程度上使用此任意数据？

解决方法:

在您的示例中,您不再需要它,因为您实际上不再使用自动完成功能.

就像您说的那样,jQuery数据功能将任意数据附加到DOM元素,这正是KendoUI创建任何Widget时所做的工作：需要的任何数据都将附加到与该Widget关联的DOM元素上,因此如果将来您需要做一些通过窗口小部件的操作,您可以使用数据获取对其的引用.

示例：创建一个Kendo窗口,用户可以将其关闭(这并不意味着销毁它,只是将其隐藏).如果将来需要打开它,只需执行$(“#win-id”).data(“ kendoWindow”).open().如果您需要对该窗口执行许多操作,而不必每次都执行$(“#win-id”).data(“ kendoWindow”),则可以：

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

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

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

这意味着您将创建一个附加到id为win-id的DOM元素上的kendoWindow,然后通过对其执行.data(“ kendoWindow”)来获得对其的引用.

在您显示的代码中,这基本上就是他们所要做的：创建自动完成功能并获取对其的引用以备将来使用.

标签：dom,kendo-ui,javascript,jquery,kendo-autocomplete
来源： https://codeday.me/bug/20191122/2056140.html