选择项目时,kendoListView 更改事件会触发两次

kendoListView change event is triggered twice when selecting item

本文关键字:两次 事件 项目 kendoListView 选择      更新时间:2023-09-26

问题:

当我通过代码选择列表视图中的第一个元素来触发更改事件时,该事件仅触发一次。当我通过单击列表视图项触发更改事件时,更改事件被触发两次。

知道什么可以触发第二个事件,如何防止它吗?

网页代码:

<div id="overview">
    <div id="listView"></div>
</div>
<!-- Used lib source loaded from lib server, for developers -->
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<!-- Custom libs loaded from meter, for customers/developers (very fast <0.3sec) -->
<script type="text/javascript" src="/MeasCon/Scripts/current_values.js"></script>

Javascript 代码:

/* JQuery function that is called when the DOM is done loading */
$(document).ready(function ()
{
    /* The HTML template code for the current values overview listview */
    /* .join is for multi line in javascript */
    var overview_template = [
        '<div class="overview_content" id="#:name#" >',
            '<div class="overview_content_textbox">',
                '<span class="overview_content_textbox_text">#:test#</span>',
            '</div>',
            '<div class="overview_content_led_box">',
                '<span class="led_box"><img class="led" src="/MeasCon/Content/IMAGES/#= led #.png"></span>',
            '</div>',
        '</div>'
    ].join("'n");
    /* the datasource for the overview listview */
    var overview_datasource = new kendo.data.DataSource(
    {
        transport: 
        {
            read: 
            {
                url: "../../Content/current_values_overview.json",
                dataType: "json"
            }
        },
    });
    /* populating the listview with the datasource as defined by the template */
    $("#listView").kendoListView(
    {
        template: kendo.template(overview_template),
        dataSource: overview_datasource,
        selectable: true,
        change: function() 
        {
            var idx = this.select().index();
            var item = this.dataSource.view()[idx];
            alert(item.name);
        },
        dataBound: function() 
        {
            //Fires when the list view has received data from the data source and it is already rendered.
            // get a reference to the list view widget
            var listView = $("#listView").data("kendoListView");
            // selects first list view item
            listView.select(listView.element.children().first());
        }
    });
});

JSON 文件

[
{
    "name": "Performance",
    "led": "ok_green"
}
]

您确定事件触发了两次吗?在这里测试:http://jsfiddle.net/OnaBai/R6v9M/

overview_content事件处理程序在做什么?我看到的是,这是一次发射,然后change被发射。而如果您使用trigger则不会调用函数overview_content