为什么来自Kendo DataSource的可观察对象的数据不能记录到控制台?

时间:2014-11-18 10:24:58

标签: javascript kendo-ui

我试图从远程服务中读取。当我使用.read()方法时,我可以在浏览器的Network标签上看到AJAX响应,但我不明白为什么我无法记录服务器和&#c} #39;对我的浏览器控制台的响应。

这是我的代码:

var accountsListDs = new kendo.data.DataSource({
    transport: {
        read: function() {
            $.ajax({
                url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.office.web.services.AccountsService",
                dataType: "json",
                type: "POST",
                cache: false,
                data: {
                    op: "list"
                },
                success: function(){
                    console.log("DataSource Read Success");
                },
                error: function(){
                    console.log("DataSource Read Failed");
                }
            });
        },
        schema: {
            data: function(response) {
                return response;
            }
        }
    },
    requestEnd: function(e) {
         var response = e.response;
         console.log(response);        
    }
});

我从浏览器的控制台手动运行accountsListDs.read()。我从服务器得到了完美的回复。当我尝试accountsListDs.data()时,它返回一个空数组。我想,它会进行异步通话,因此.data()不会立即发挥作用,我甚至尝试将其与requestEnd事件联系起来(如剑道过于有用的文档所述,但仍然没有运气)。

即使我从Kendo的文档中复制粘贴代码,它也不起作用。

我在这里缺少什么?

enter image description here

(先谢谢,CodingWithSpike)

1 个答案:

答案 0 :(得分:1)

您可以,但您没有传播ajax请求收到的数据。您应该使用收到的数据调用op.success

var accountsListDs = new kendo.data.DataSource({
    transport: {
        read: function(op) {
            $.ajax({
                url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.office.web.services.AccountsService",
                dataType: "json",
                type: "POST",
                cache: false,
                data: {
                    op: "list"
                },
                success: function(data){
                    console.log("DataSource Read Success");
                    op.success(data);
                },
                error: function(){
                    console.log("DataSource Read Failed");
                }
            });
        },
        schema: {
            data: function(response) {
                return response;
            }
        }
    },
    requestEnd: function(e) {
         var response = e.response;
         console.log(response);        
    }
});

以下代码段显示了该想法的正在运行的版本。



$(document).ready(function () {
  var dataSource = new kendo.data.DataSource({
    transport: {
      read:  function (op) {
        $.ajax({
          url: "http://demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp",
          success: function(data){
            console.log("DataSource Read Success");
            op.success(data);
          },
          error: function(){
            console.log("DataSource Read Failed");
          }
        });
      }
    },
    requestEnd: function(e) {
      var response = e.response;
      console.log(response);
    },
    batch: true,
    pageSize: 20,
    schema: {
      data: function(response) {
        return response;
      }
    }
  });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 550,
    columns: [
      "ProductName",
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
      { field: "UnitsInStock", title: "Units In Stock", width: 120 },
      { field: "Discontinued", width: 120 }
    ],
  });
});

<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<div id="grid"></div>
&#13;
&#13;
&#13;