Question

I am trying to bind the listview to the ViewModel. I have placed some hard coded data into the code to ensure that it is not a problem with the web services. I am not seeing any console errors so I am at a loss for how to troubleshoot this problem.

Ideally I would want to have as much of the code dealing with getting the data in the ViewModel, and I want to stay as close as possible to the way that you are supposed to use the KendoUI Mobile framework.

Html

<div data-role="view" id="contactView" data-model="ContactViewModel" data-init="dataInit">
    <h1 id="ContactHallo">Contact Screen</h1>
    <ul id="contactDetailList" 
        data-role="listview" 
        data-style="inset" 
        data-template="contactDetailtemplate" 
        data-bind="source: rdata">
    </ul>
</div>

JavaScript

 var ContactViewModel = kendo.observable({
         rdata: null,

         loadData: function () {
             var testData = [
                                {
                                    AssociatedContactType: "n\/a",
                                    AssociatedProperties: [],
                                    EmailAddress: "n\/a",
                                    FName: "User1",
                                    HomeNumber: "n\/a",
                                    LName: "LastName",
                                    MobileNumber: "[phone]",
                                    WorkNumber: "n\/a"
                                }];
             var loadedData = new kendo.data.DataSource.create({ data: testData });
             loadedData.read();

             this.rdata = loadedData;
         }
     });

     function dataInit() {
         ContactViewModel.loadData();
     }

     var app = new kendo.mobile.Application($(document.body));

Template

<div>
    <h4>Added Record</h4>
    <a href="tel:#:data.MobileNumber#">#:data.MobileNumber#</a>
</div>

Answer 1

It would be interesting to know why someone down-voted the original question..

I cover this in one of my blog posts here: Kendo Mobile Gotchas, Tips, and Tricks.

The MVVM data bind actually happens before the init event, so your ContactViewModel.rdata is still null when the bind happens. However, I think if you properly call .set() when setting rdata, it might fix your issue:

loadData: function () {
    ...
    this.set('rdata', loadedData);
}

The set should trigger the ListView to update since rdata is being set.

---

If that doesn’t work, then you can get really tricky and delay the MVVM data bind until the init event by doing it yourself instead of using data-model declaratively.

To do that, you would remove data-model= attribute from your view, and instead manually call kendo.bind() at the end of your init function, like this:

<div data-role="view" id="contactView" data-init="dataInit">

function dataInit(initEvt) {
    ContactViewModel.loadData();
    kendo.bind($(initEvt.view.element), ContactViewModel, kendo.mobile.ui);
}