[译]kendoui

原文

为了使用方法和事件，首先要获取到widget实例。

获取widget

一共有3种获取widget的方式。

jQuery的data方法

将widget的名作为参数传给jQuery的data方法。(widget都是jQuery插件)。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {
          // 创建widget实例
          $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

          // 获取widget实例
          var autoComplete = $("#animal").data("kendoAutoComplete");

          console.log(autoComplete);
        });
    </script>

getKendo* 方法

还可以使用getKendo<WidgetName>方法来获取widget。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {
          // 创建widget实例
          $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

          // 获取widget实例
          var autoComplete = $("#animal").getKendoAutoComplete();

          console.log(autoComplete);
        });
    </script>

The JavaScript Method Syntax

        <p>Animal: <input id="animal" /></p>

        <script>
            $(function() {
              $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

              var autoComplete = $("#animal").data("kendoAutoComplete");

              // focus the widget
              autoComplete.focus();
            });
        </script>

这不就是第一种方法吗？？？

处理widget事件

在初始化的时候绑定事件

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {

          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
              change: function(e) {
                console.log("change event handler");
              }
          });

        });
    </script>

在初始化之后去绑定事件

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {

          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
          });

          // ...

          var autocomplete = $("#animal").data("kendoAutoComplete");

          // 这种方式绑定的事件处理器，事件每次触发都会执行 
          autocomplete.bind("change", function(e) {
                console.log("change event handler");
          });

          // 这种方式绑定的事件处理器，只有事件首次被触发才会执行
          autocomplete.one("open", function(e) {
                console.log("open event handler");
          });

        });
    </script>

事件处理器参数

每个widget都会传递一个参数给事件处理器，这个参数被称为event object。所有的event object都有一个sender字段，它指向触发事件的widget实例。

不支持传递额外的自定义事件参数给事件处理器。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {

          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
              open: function(e) {
                var autocomplete = e.sender;
              }
          });

        });
    </script>

阻止事件

使用event object的preventDefault()方法阻止事件。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {
          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
          });

          var autoComplete = $("#animal").data("kendoAutoComplete");

          // prevent the autocomplete from opening the suggestions list
          autoComplete.bind('open', function(e) {
            e.preventDefault();
          });
        });
    </script>

解绑事件

为了解绑事件，要保持一个到事件处理器函数的引用，并将其传到unbind方法中去。如果调用unbind方法时没有传递任何参数，那么会解除所有这个事件的handler。

    <p>Animal: <input id="animal" /></p>

    <button id="unbindButton">Unbind event</button>

    <script>
        $(function() {
          var handler = function(e) { console.log(e); };
          $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

          var autoComplete = $("#animal").data("kendoAutoComplete");

          autoComplete.bind("open", handler);

          $("#unbindButton").on("click", function() {
              autoComplete.unbind("open", handler);
          });
        });
    </script>

限制

当直接调用方法时，对应的event不会触发。例如，如果通过API直接调用PanleBar的select方法，那么select事件不会被触发。