javascript - Kendo UI ComboBox 更改事件多次运行

Question

我有一个 KendoUI ComboBox 的 MVC 控件，它不会提前设置更改事件。渲染后，页面 Controller 会在其自己的更改事件中设置和填充。

奇怪的是，这个事件被调用了两次:

• 当我更改所选项目时
• 当我点击远离控件时

问:我做错了什么？
问:这是我们应该如何覆盖现有 Kendo ComboBox 上的更改事件吗？

MVC 控制:
正如您所看到的，我没有在这里定义任何客户端事件...

@(Html.Kendo().ComboBox()
  .Name("ddlTechnician")
  .Filter("contains")
  .Placeholder("Select Technician...")
  .DataTextField("Text")
  .DataValueField("Value")
  .BindTo(new List<SelectListItem>() {
      new SelectListItem() { Text = "Frank", Value = "1" },
      new SelectListItem() { Text = "Suzie", Value = "2" },
      new SelectListItem() { Text = "Ralph", Value = "3" }
  })
  .Suggest(true)
  .HtmlAttributes(new { style = "width:300px;" }))

页面 Controller :
而且，我在这里只定义一次事件。我还确认在页面 Controller 中设置事件之前尚未触发该事件

$(document).ready(function () {

    var PageController = (function ($) {

        function PageController(options) {
            var that = this,
                empty = {},
                dictionary = {
                    elements: {
                        form: null
                    },
                    instances: {
                        ddlTechnician: null
                    },
                    selectors: {
                        form: 'form',
                        ddlTechnician: '#ddlTechnician'
                    }
                };

            var initialize = function (options) {
                that.settings = $.extend(empty, $.isPlainObject(options) ? options : empty);

                dictionary.elements.form = $(dictionary.selectors.form);

                // Objects
                dictionary.instances.ddlTechnician = $(dictionary.selectors.ddlTechnician, dictionary.elements.form).data('kendoComboBox');

                // Events
                dictionary.instances.ddlTechnician.setOptions({ change: that.on.change.kendoComboBox });
            };

            this.settings = null;
            this.on = {
                change: {
                    kendoComboBox: function (e) {

                        // This is getting called MULTIPLE TIMES
                        console.log('kendoComboBox RAN');
                    }
                }
                }
            };

            initialize(options);
        }

        return PageController;
    })(jQuery);

    var pageController = new PageController({});
});

Answer 1

当我通过 setOptions 设置事件处理程序时，我能够在 Kendo JQuery Combobox 上重现您的问题，这不是渲染小部件后推荐的方式。相反，您应该使用“绑定(bind)”方法，如 documentation's example for change events 中所示。 .

尝试将事件处理程序设置为以下代码行:

dictionary.instances.ddlTechnician.bind("change", that.on.change.kendoComboBox);

这是一个显示差异的道场:http://dojo.telerik.com/iyEQe

希望这有帮助。