页面加载后的剑道数据源

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() 实际上并没有做任何事情。我已经尝试了多种方法来获得我在纯粹的 Jquery 世界中习惯于执行 Ajax 调用和附加/更新 DOM 的功能。在加载 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();
}

Answer 2

尝试：

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"
    }
},
change: function() {
    $("#communications").html(kendo.render(commTemplate, this.view());
}
});

commData.read();

取自：http://demos.kendoui.com/web/datasource/remote-data.html

Answer 3

$("#communications").html(commTemplate(this._pristine));