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

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

组件初始化

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

 <button>Foobutton> | <button>Barbutton>
 <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>

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