如何將數據綁定到Kendo UI中的Listview Mobile

Question

如何將Web服務中的數據綁定到Kendo UI mobile（IOS）。我嘗試使用Web服務時頁面顯示空白，並且當我直接綁定數據時它向我展示了html頁面中的數據（註釋數據）。任何人都可以提供任何示例代碼或任何示例。

在這裏，我提供我的代碼，我有

<div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" 
    data-layout="databinding"> 
    <ul id="flat-listview"> 
    </ul> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     var dataS = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        type: 'GET', 
        url: 'mobileAppWebService.asmx/EmployeeNames', 
        dataType: 'json', 
        data: '{}', 
        contentType: 'application/json; charset=utf-8' 
       }, 
       schema: { 
        data: "d" 
       } 
      } 
     }); 
     debugger 
     $("#flat-listview").kendoMobileListView({ 
      dataSource: dataS, 
      template: "${ename}" 
     }); 

//     var dataSource = ["Sashimi salad", "Chirashi sushi", "Seaweed  salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki",  "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi  rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon"]; 
    //     function mobileListViewDataBindInitFlat() { 
    //      $("#flat-listview").kendoMobileListView({ 
//       dataSource: dataSource, 
//       endlessScroll: true       
//      }); 
//     }; 
     }); 
</script> 
<script type="text/javascript"> 
    var app = new kendo.mobile.Application(document.body); 
</script> 

代碼的Web服務嘗試在HTML頁面

代碼

SqlConnection con = new SqlConnection("Data Source=SHANKAR-PC\\SQLEXPRESS;    Initial   Catalog=Occumen;Integrated Security=True"); 

[WebMethod] 
public List<EmpNames> EmployeeNames() 
{ 
    SqlDataAdapter da = new SqlDataAdapter("select ename from emp", con); 
    DataSet ds = new DataSet(); 
    da.Fill(ds, "names"); 
    return LstEmpNames(ds); 
} 

public List<EmpNames> LstEmpNames(DataSet ds) 
{ 
    List<EmpNames> objenamelst = new List<EmpNames>(); 
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
    { 
     EmpNames objemp = new EmpNames(); 
     objemp.ename = ds.Tables[0].Rows[i][0].ToString(); 
     objenamelst.Add(objemp); 
    } 
    return objenamelst; 
} 

Answer 1

<script type="text/x-kendo-template" id="ListViewTemplate">  
    <div class="GetData"> 
    ${eid} 
    </div> 
    <div class="GetData"> 
     ${ename} 
    </div> 
</script> 

<script type="text/javascript"> 
    function mobileListViewDataBindInitFlat() { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "mobileAppWebService.asmx/GetData", 
      endlessScroll: true, 
      dataType: "json", 
      success: function (data) { 
       $("#flat-listview").kendoMobileListView({ 
        dataSource: data.d, 
        template: $("#ListViewTemplate").html() 
       }); 
      }, 
      failure: function (msg) { 
       alert(msg); 
      } 
     }); 
    } 
var app = new kendo.mobile.Application(document.body); 
</script>