Updating ListView dataSource dynamically

[Ryan]

I am attempting to update the listview datasource but have not been having any luck. I had it working creating the kendoMobileListView in my javascript but I am trying to avoid defining the ul #listView as a kendoMobileListView in my javascript.

<ul id="listView" data-role="listview" data-source="siteDataSource" data-template="sitesListViewTemplate"></ul>

function (ko, system, SiteDataCachingService, $) {
        var homeViewModel = function () {
        var self = this;
        self.siteDataSource = null;
        
        self.init = function (e) {
            self.siteDataSource = new kendo.data.DataSource({data: SiteDataCachingService.sites});
            $("#listView").data("kendoMobileListView").dataSource.read();
        }

        return self;
    }

    return homeViewModel;
}

What am I doing wrong when updating my dataSource that is causing it not to update?

[Petyo]

Hello,

Re-pointing the siteDataSource field to a new datasource will not change the assigned widget datasource. You may consider updating the widget datasource data instead.

Regards,
Petyo
Telerik

[Ryan]

I modified my code as follows:
if (SiteDataCachingService.sites)
{
   if(self.siteDataSource)
      self.siteDataSource.data(SiteDataCachingService.sites);
   else
      self.siteDataSource = new kendo.data.DataSource({data: SiteDataCachingService.sites});
}

The only problem is unless I specifically set my datasource no changes are made to the UI.
If I add $("#listView").data("kendoMobileListView").setDataSource(self.siteDataSource); I get items in my listview but this is not desirable.
Why is it that setting my data-source="siteDataSource" with a viewModel property of self.siteDataSource is not enough to update the UI?

[Petyo]

Hello Ryan,

In general, this is how JavaScript reference assignment works. This pseudo code illustrates the behavior:

var obj1 = { foo: "foo" };
var obj2 = { foo: "bar" };

var myModel = { source: obj1 };
var myWidget = { source: myModel.source };

myModel.source  = obj2;

myWidget.source; // still obj1.

Regards,
Petyo
Telerik

[Ryan]

It was clear from your original post that I needed to be updating the underlying data and not creating new datasources each time.

My code is as follows:
self.siteDataSource = new kendo.data.DataSource({data: []});

self.loadSiteData = function () {
   if (SiteDataCachingService.sites)
   {
      if(self.siteDataSource)
         self.siteDataSource.data(SiteDataCachingService.sites);
   }
}

I am not trying to change the reference of the myModel.source. I am updating the underlying data of the datasource as you suggested. I am still not getting results to populate in my kendoMobileListView. Since I was not able to get the kendoMobileListView data-source to work properly or even using a binding of data-bind="source: siteDataSource" I have changed my solution to use the Knockout listview with no issues. I would still like to use the kendoMobileListView but with the data source not updating properly it is not a viable solution. If it would help I can give you a more complete code base. I have tried to boil the code down to avoid confusion.

[Petyo]

Hello Ryan,

Thank you for the clarification. Your approach should work, in fact - please check this demo. Clicking the button immediately updates the listview. 

Regards,
Petyo
Telerik