CODEWITHSUNDEEP
javascriptmobilemvvmkendo-ui
Rihan Meij
Rihan Meij

Reputation: 1759

Unable to bind a Kendo Mobile ListView to data using "data-bind=source:"

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: "+27 21 0823219213",
                                    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>

Upvotes: 4

Views: 2487

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43718

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);
}

Upvotes: 4

Related Questions