加載頁面後的Kendo數據源

Question

我有一個加載在document.ready（）上的kendo數據源，並用來自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數據，這些數據與其他客戶端進行了驗證。問題在於customerSelected（）函數中的kendo.data.DataSource（）實際上沒有做任何事情。我嘗試了各種方法來獲得這個功能，我習慣於在純粹的JQuery世界中進行Ajax調用和附加/更新DOM。在DOM被加載後，我在這裏丟失了什麼以允許另一個DataSource？

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

$（ 「＃通信」）HTML（commTemplate（this._pristine））;