javascript - 页面加载后的 Kendo 数据源

Question

我有一个剑道数据源加载到 document.ready() 并使用 JSON 请求的结果填充一个组合框。然后，一旦用户在组合框中选择了一个项目，我就会执行一个函数 customerSelected() 来加载该客户的值。我遇到的问题是我无法在页面加载后设置另一个 Kendo 数据源来填充数据。如果我使用常规的 Jquery ajax 调用，数据似乎会在 Kendo 模板执行后加载，并且不会填充我的数据。

function customerSelected(customerid) {
    var customer = customerid;

    var commTemplate = kendo.template(' # for (var i=0; i < data.length; i++) { # <div class="communication" contentEditable>#= data[i].fname # - #= data[i].lname # #= data[i].details #</div> # } # ');
    var commData = new kendo.data.DataSource({
        transport: {
            read: {
                url: "index.php?mode=showCustomerData",
                dataType: "json"
            }
        }
    });

    $("#communications").html(commTemplate(commData));
}

$('document').ready(function() {

    var customers = new kendo.data.DataSource({
        transport: {
            read: {
                url: "index.php?mode=showCustomers",
                dataType: "json"
            }
        }
    });
    $("#customerBox").kendoComboBox({
        dataSource: customers,
        dataTextField: "name",
        dataValueField: "customer_id",
        filter: "contains",
        change: function(e) {
            console.log(this.value());
            customerSelected(this.value());
            $("#customerSelected").val(this.value());

        }
    });


});

这里的每个数据源都返回正确的 JSON 数据，我已经用 rest 客户端验证了这些数据。问题只是 customerSelected() 函数中的 kendo.data.DataSource() 实际上没有做任何事情。我已经尝试了多种方法来获得我在执行 Ajax 调用和附加/更新 DOM 的纯 Jquery 世界中习惯使用的功能。在加载 DOM 后，我在这里缺少什么以允许另一个数据源？

Answer 1

你的问题是:

1. 您不是在创建数据源后读取数据。

2. 数据是异步加载的，所以你不能马上使用它。

试试这个:

function customerSelected(customerid) {
    var customer = customerid;

    var commTemplate = kendo.template(' # for (var i=0; i < data.length; i++) { # <div class="communication" contentEditable>#= data[i].fname # - #= data[i].lname # #= data[i].details #</div> # } # ');
    var commData = new kendo.data.DataSource({
        transport: {
            read: {
                url: "index.php?mode=showCustomerData",
                dataType: "json"
            }
        }
    });

    // run this callback the next time data changes
    // which will be when the data is done being read from the server
    commData.one("change", function () {
        $("#communications").html(commTemplate(commData.data()));
    });

    // read the data from the server
    commData.fetch();
}