locked
Refreshing a WinJS.Binding.List

    Question

  • Hello all,

    I have an app which is similar to the Grid Template in Visual Studio, but one feature I am trying to add is refresh. I understand that I can add or remove items from the dataSource and the ListView will update automatically, but sometimes the new list is radically different from the old list. However, if I try list = new WinJS.UI.List(), the groupedItems list (Grouped projection over list) goes berserk. If I simply delete every member in list (with list.pop()) and add the new ones, the listview doesn't see that I deleted every member and the listview becomes a combination of the refreshed and unrefreshed lists.

     

    What is the proper way to refresh a WinJS.Binding.List() and its grouped projection?


    All help is greatly appreciated and I always accept an answer!
    • Edited by sddhhanover Thursday, August 23, 2012 9:26 PM
    Thursday, August 23, 2012 9:22 PM

Answers

  • This is because xhr uses proper caching and your server does not set the correct headers. I assume the server does not set any E-Tag or Refresh header so the xhr component (which is based in IE) chooses an arbitrary refresh date based on the kind of data (1 day for images, 1 hour for html, i dont know). So when you request the exact same URL again, IE checks if a Cache duration is set on the url and if the cached copy is still valid, it will just give you back this data without even contacting the server.

    There are 2 ways to solve this (good IE behaviour):

      • Add a random query param to your request URL like this http://example.org/?2943823942 which would be a Date.now() timestamp
      • Fix the server side and let it specify a No-Cache HTTP header

    Friday, August 31, 2012 10:47 AM

All replies

  • If I understand your problem correctly you want to call beginEdits and endEdits on the Datasource.

    Something similar to this:

    ds = <<SOME ELEMENT>>.winControl.itemDataSource;

    ds.beginEdits();

    <<do your removals>>

    ds.endEdits();

    If this doesn't suffice, you will need to post a simple sample of the problem OK?!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, August 24, 2012 7:06 PM
    Moderator
  • I tried that, but it did not solve my problem. My app receives data from the internet and, therefore will become outdated if not refreshed for a long time. In order to refresh, I pop() all the elements of the listview containing my data and refill it with up-to-date data from my online database. Pseudo Code:

    //delete current, obsolete data
    while (list.length > 0) list.pop();
    
    WinJS.xhr(...).done(function onComplete(res) {
    var results =  JSON.parse(res);
    for(var i = 0; i < res.items.length; i++) {
    list.push(res.items[i]);
    }
    }
    However, I somehow end up with a listview populated with doubles of everything. I also tried calling invalidateAll() on the dataSource, but it didn't work.

    • Edited by sddhhanover Friday, August 24, 2012 7:47 PM
    Friday, August 24, 2012 7:47 PM
  • Can you post code that I can repro the problem with?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, August 27, 2012 6:40 PM
    Moderator
  • Upon further analysis, it turns out the WinJS.xhr request was returning the same data when I refreshed as when I first entered the program despite having added data to the server in between requests. Could this be the result of the framework caching stuff, or is it likely a logical error on my part?
    Thursday, August 30, 2012 11:27 PM
  • This is because xhr uses proper caching and your server does not set the correct headers. I assume the server does not set any E-Tag or Refresh header so the xhr component (which is based in IE) chooses an arbitrary refresh date based on the kind of data (1 day for images, 1 hour for html, i dont know). So when you request the exact same URL again, IE checks if a Cache duration is set on the url and if the cached copy is still valid, it will just give you back this data without even contacting the server.

    There are 2 ways to solve this (good IE behaviour):

      • Add a random query param to your request URL like this http://example.org/?2943823942 which would be a Date.now() timestamp
      • Fix the server side and let it specify a No-Cache HTTP header

    Friday, August 31, 2012 10:47 AM
  • Do you mean a Cache-Control: No-Cache header?
    Saturday, September 8, 2012 2:44 AM