0

我正在使用 Kendo Mobile Listview 来显示 json 文件的内容。第一次搜索效果很好，在单击事件上，我可以查看绑定到该列表项的数据项。然而，在第二次搜索之后，数据项变得未定义。我可以想到很多方法来解决这个问题，但是没有理由这个当前的方法不能工作。是因为列表视图不应该再次定义它的数据源吗？任何见解都值得赞赏。谢谢你。HTML

<span id="search">
                <input id="inputSearch" type="text" placeholder="Search" class="k-textbox"/>
                <a id="btnSearch" class="k-button" type="submit"><span class="k-icon k-i-search" >...</span></a>
            </span>

  • 请细化您的搜索

    • 这是js片段：

     $.ajax({
                       cache:false,
                       type:"GET",
                       dataType: "json",
                       url: "http://"+host+"/Api"+requestController+queryString,
                       headers: {"AuthToken":cookie},
                       success:
                           function (data) {
                               var val = data.data;                                       
                                    if(val.length!=0) {
                                        $("#customerList").data
                                        var customerDataSource = new kendo.data.DataSource({ data: val });
                                        customerDataSource.read();
                                        $("#customerList").kendoMobileListView({
                                            dataSource: customerDataSource,
                                            template: '<a>${Company}<span class="k-status-text"> <br />${CustNo}</span></a>',
                                            dataType:"json",
                                            style: "inset",
                                            click: function(e){    
//!!!! EXCEPTION OCCURS HERE ON SECOND SEARCH. DATAITEM UNDEFINED                                                
                                                alert(e.dataItem.CustNo);
                                                // redirect to
                                                app.navigate("#overview-customer");

                                            }
                                        });
                                    } else {
                                        $("#customerList").append('<li>' +'<div class="k-block k-info-colored">'+
                                            'Please refine your search'+'</div>' + '</li>');
                                    }

                           }
                    });
    4

    2 回答 2

    0

    每次搜索时您都在重新创建列表视图

    $("#customerList").kendoMobileListView({

    这是一项昂贵的操作，尤其是对于移动设备。更好地初始化（创建）移动列表视图一次并使用dataSource.data()方法更改它使用的数据。这也将确保您不会遇到您遇到的问题。

    于 2013-02-25T17:52:00.737 回答
    0

    根据 Petur 的回答，列表视图应该像这样绑定。每次点击都实例化列表视图很费力，并且与 Kendo 的脚本不兼容。

     var customerDataSource = new kendo.data.DataSource({ });
    // Mobile listview
     $("#customerList").kendoMobileListView({
                                            dataSource: customerDataSource,
                                            template: '<a>${Company}<span class="k-status-text"> <br />${CustNo}</span></a>',
                                            dataType:"json",
                                            style: "inset",
                                            click: function(e){
                                                var index = $(e.item).index();
                                                var text= $(e.item).index();
                                                alert(e.dataItem.CustNo);
                                                // redirect to
                                                app.navigate("#overview-customer");


                                            },
                                            dataBound: function(e){
                                                alert("Ive been bound");
                                            }
                                        });

      $('#search a').click(function () {
          var searchstr = $('#search input').val();
          var requestController = "/Customers";
          var queryString= "?filtercriteria=custno-"+searchstr+"&company-"+searchstr;
                    $.ajax({
                       cache:false,
                       type:"GET",
                       dataType: "json",
                       url: "http://"+host+"/Api"+requestController+queryString,
                       headers: {"AuthToken":cookie},
                       success:
                           function (data) {
                               var val = data.data;
                                    if(val.length!=0) {
                                        var ds = [{ data: val }];
                                        customerDataSource.data(val);

                                    } else {
                                        $("#customerList").append('<li>' +'<div class="k-block k-info-colored">'+
                                            'Please refine your search'+'</div>' + '</li>');
                                    }

                           }
                    });
            });
    于 2013-02-26T16:41:36.737 回答