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

2019-11-22 01:34:19 阅读：224 来源： 互联网

标签：dom kendo-ui javascript jquery kendo-autocomplete

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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