[译]kendoui - 方法和事件

Posted irocker

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[译]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 objectpreventDefault()方法阻止事件。

    <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事件不会被触发。

以上是关于[译]kendoui - 方法和事件的主要内容,如果未能解决你的问题,请参考以下文章

KendoUI 调度程序不显示数据

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

使用 AngularJS 服务代替 KendoUI 调度程序中的 url

【译】理解LSTM(通俗易懂版)

KendoUI Grid 绑定单击双击事件

译ECMAScript 2016, 2017, 2018 新特性之必读篇