2

我有一个剑道数据源，它加载到 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 后，我在这里缺少什么以允许另一个数据源？

4

3 回答 3

2

你的问题是：

  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();
}
于 2013-09-24T00:37:44.093 回答
1

尝试：

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.c​​om/web/datasource/remote-data.html

于 2013-09-23T16:01:13.787 回答
0

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

于 2013-09-23T17:24:25.467 回答