【Kendo UI 中文教程】组件widget初始化、配置和获取引用

在上一篇文章的最后，我们使用了一个kendo的日期控件，本篇我们将更进一步地介绍kendo的组件调用

组件初始化

所有Kendo UI的的组件都会被注册成Jquery插件并且支持链式调用。例如：

<button>Foo</button> | <button>Bar</button> <script> $(function() { $("button").kendoButton().css("color", "red"); }); </script>

这段代码初始化了一个按钮，并且将他的颜色设为了红色

配置

在初始化的时候，传入一个js对象可以对组件进行配置。 例如下面这个例子，在初始化grid组件的时候，指定了grid的高度、列、数据。 这些配置项目在api中可以查到，建议大家平时使用的时候多仔细阅读，很多时间中遇到的莫名其妙的问题，其实在api文档中可以都找到答案。

<div id="grid"></div> <script> $("#grid").kendoGrid({ height: 200, columns:[ { field: "FirstName", title: "First Name" }, { field: "LastName", title: "Last Name" } ], dataSource: { data: [ { FirstName: "John", LastName: "Doe" }, { FirstName: "Jane", LastName: "Doe" } ] } }); </script>

获取已初始化好的组件的引用

有时候一个组件已经初始化好了，我们想根据他们dom元素拿到对应的kendo对象，我们可以通过对jquery对象调用data(“xxxx”)拿到，”xxxx”即使组件的名称，例如

<input id="autocomplete" /> <script> var autocomplete = $("#autocomplete").data("kendoAutoComplete"); </script>

不要重复初始化

如果对一个dom对象多次初始化为kendo组件，会发生意想不到的错误，例如下面的代码

<input id="autocomplete" /> <script> // 初始化了一次 $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]); // 又初始化了一次 var duplicate = $("#autocomplete").kendoAutoComplete().data("kendoAutoComplete"); </script>

这段代码，在第二次的时候原本的用以是获取组件的引用，却再次初始化了一次组件，会发生不可预期的错误，大家在编码时一定要注意规避这个问题。