ListView binding works only when delaying item datasource assignment RRS feed

  • Question

  • Here's what I have (some of the details might be irrelevant, I'm not sure):

    * 3 WinJS (2.0) page controls, meant to be custom controls that are all displayed in one page:
          - Page control #1 contains some HTML elements (divs, buttons)
          - Page controls #2-3 each contain a ListView control. The itemDataSource for the list view is set on the js file of the page control, in the "ready" function.

    * A main page with HTML that looks like this:
            <div id="header">
                <!-- page control 1 instatiation -->
            <div id="contentSection">
                <!-- page control 2 instatiation -->
                <!-- page control 3 instatiation -->

    When I run the app I expect ofcourse to see the UI of every control. However, something strange happens:
    * I always see control 1, never see control 2 and about once every 10 runs I see control 3.
    * If I comment out only control 1, I always see control 3 but never 2.
    * If I comment out control 1 and another control, I see the other control that is left.

    After looking at the DOM Explorer I found out that not seeing a control means that the ListView is in the DOM but the items are not.

    When previewing the page in Blend, I always see controls 1 and 3 but not 2.

    The only way to see component 2 is to uncomment 1 and 3.

    Another thing I discovered is that if I delay the assigment of the a ListView's itemDataSource (in the "ready" function), using setTimeout, even by 1 or sometimes even 0 milliseconds, everything is solved and I can see all 3 controls perfectly.

    I hope my description was clear enough.

    Any ideas what might cause such behavior?

    • Edited by Juny327 Wednesday, October 16, 2013 4:10 PM
    Wednesday, October 16, 2013 4:09 PM

All replies

  • I'm not really sure why you have multiple page controls on one page; that appears to break the intended use of the PageControl API (if that's what you're using in your custom page control), and I'd suggest trying to use a single PageControl with multiple DIV elements on the page. In any case, if setTimeout works then maybe there is markup in your HTML or JavaScript code that is calling the data model before the data has returned. If so, instead of using setTimeout, you could create an event in your data model and add a listener to the page to set the itemDataSource once the data is available. (To find an example, search samples for "Hub template sample with asynchronous data".)

    Wednesday, October 16, 2013 6:04 PM
  • Thank you for your answer. Well,

    1. The data is not asynchronous. In fact, it's just an array with sample data. I call a function to get the array, completely synchronously, and then set the itemDataSource. Setting the itemDataSource is supposed to refresh the relevant DOM section, I think.

    2. Yes, I have one page control for the whole main page and within that page control I have inner page controls that I use as custom controls. I've seen this method in some tutorials and it's comfortable because it gives me separate html, css and js files for the custom control. Is it not a good way to go?
    According to this, a page control is "A modular unit of HTML, CSS, and JavaScript that can be navigated to or used as a custom Windows Library for JavaScript control". I interpreted the latter part as supporting this method.

    Thursday, October 17, 2013 8:09 AM