javascript - 为什么 Kendo DataSource 的 Observable 对象的数据无法记录到控制台？

Question

我正在尝试从远程服务读取。当我使用 .read() 方法时，我可以在浏览器的 Network 选项卡上看到 AJAX 响应，但我不明白为什么我无法记录服务器对我的浏览器控制台的响应。

这是我的代码:

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 事件 Hook (如 Kendo 的过度描述)有用的文档，但仍然没有运气)。

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

我在这里缺少什么？

(提前感谢 CodingWithSpike)

Answer 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>