locked
Listview populating issue RRS feed

  • Question

  • Problem:

    I started with the grid app template, my app has multiple pages of listviews one after the other.  I populate each pages listview differently based on a different data.js file I've told it about in the head <script src> section.  Whenever I load a .html for the first time the new title and data.js file are loaded successfully.  Whenever I navigate to a .html file that has already been opened before, the title will show correctly, but the data.js file persists from the last one that was loaded for the first time.   

    Example to replicate issue if above is unclear: 

    For an easy example assume I have my home page with 2 links A and B.  On A I have links A1 and A2, on B I have links B1 and B2. I have 3 html files, one for home, A, and B.  Each has their own data.js file defined at the top.  To understand what's happening assume I start the app, we're now at home.html.  I have a title "Home" and 2 links in my listview: A and B.  I Click A, now I am in A.html with a title "A" and a listview with A1 and A2.  If I click the back arrow, I am at home.html with a title "Home" BUT my listview is still A1 and A2.  If I click A2 it brings me to B.html because I still clicked the listview at index==1.  It has title "B" and listview B1 and B2.  Now if I click the back arrow I get title "Home" and links B1 and B2, If I click B1 I get title "A" and listview B1 and B2.  The titles are changing to the correct .html, but the data.js is staying with whichever .html file was the newest one opened for the first time.  

    Code: 

    This is done in the Grid App sample so single page navigation is setup.  I navigate to new .html pages based on which listview index you click through the JS like so: 

    _itemInvoked: function (args) {
                if (args.detail.itemIndex == 0) {
                    WinJS.Navigation.navigate("/pages/frontOffice/frontOffice.html");
                }



    • Edited by ZachAtttack Friday, April 12, 2013 2:44 PM headers
    Friday, April 12, 2013 2:41 PM

Answers

  • Looking at your steps above, I think what's happening is that the copy of data.js that you put into /pages/test/ is redefining members in the "Data" namespace. So when you navigate to the Test page, it's executing /pages/test/data.js and replacing the items that the listview in groupedItems.html is using.

    In your example, both /js/data.js and /pages/test/data.js contain the following code,

        WinJS.Namespace.define("Data", {
            items: groupedItems,
            groups: groupedItems.groups,
            getItemReference: getItemReference,
            getItemsFromGroup: getItemsFromGroup,
            resolveGroupReference: resolveGroupReference,
            resolveItemReference: resolveItemReference
        });

    In the file /pages/test/data.js, try changing "Data" to "TestData". If you have anything in the Test page that is accessing data from /pages/test/data.js, it will need to be updated to access it via the TestData namespace.

    I hope that helps,

    Joel

    • Marked as answer by ZachAtttack Tuesday, April 16, 2013 3:11 PM
    Tuesday, April 16, 2013 2:23 PM

All replies

  • Hello,

    Could you post a link for the sample or paste your related repro code here for us to test?

    thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, April 15, 2013 8:13 AM
    Moderator
  • I just reproduced the problem, not exactly, but it shows my issue.  I can tell you how to do that and paste code here to plug in:

    1. Start new project with the Grid App template (I'm using the JS/CSS/HTML side of things)

    2. Create new folder: /pages/test

    3. Create new page control inside /pages/test

    4. Add new .js file in /pages/test: /pages/test/data.js

    5. Copy paste the code inside /js/data.js and paste it in /pages/test/data.js

    6. In /pages/test/data.js change some of the code in function generateSampleData()at the bottom so the grid will look different: 

    function generateSampleData() {
            var itemContent = "<p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat";
            var itemDescription = "Item Description: Pellentesque porta mauris quis interdum vehicula urna sapien ultrices velit nec venenatis dui odio in augue cras posuere enim a cursus convallis neque turpis malesuada erat ut adipiscing neque tortor ac erat";
            var groupDescription = "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante";
    
            // These three strings encode placeholder images. You will want to set the
            // backgroundImage property in your real data to be URLs to images.
            var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
            var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
            var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
    
            // Each of these sample groups must have a unique key to be displayed
            // separately.
            var sampleGroups = [
                { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription }
            ];
    
            // Each of these sample items should have a reference to a particular
            // group.
            var sampleItems = [
                { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
                { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
                { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray }
            ];
    
            return sampleItems;
        }

    7. Go to groupedItems.js and change the last function _itemInvoked: function (args):

    _itemInvoked: function (args) {
                if (args.detail.itemIndex == 0) {
                    nav.navigate("/pages/test/test.html");
                } else {
                    // If the page is not snapped, the user invoked an item.
                    var item = Data.items.getAt(args.detail.itemIndex);
                    nav.navigate("/pages/itemDetail/itemDetail.html", { item: Data.getItemReference(item) });
                }
            }

    8. Add a script reference in test.html:

    <script src="/pages/test/data.js"></script>

    9. Also in test.html change the <body>:

    <body>
        <!-- These templates are used to display each item in the ListView declared below. -->
        <div class="headertemplate" data-win-control="WinJS.Binding.Template">
            <button class="group-header win-type-x-large win-type-interactive" data-win-bind="groupKey: key"
                onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" role="link" tabindex="-1" type="button">
                <span class="group-title win-type-ellipsis" data-win-bind="textContent: title"></span>
                <span class="group-chevron"></span>
            </button>
        </div>
        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
                <div class="item-overlay">
                    <h4 class="item-title" data-win-bind="textContent: title"></h4>
                    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
                </div>
            </div>
        </div>
    
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment groupeditemspage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button""></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Test</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div class="groupeditemslist win-selectionstylefilled" aria-label="test" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
            </section>
        </div>
    </body>

    Now run the app, click the first item on the home page, it will direct you to a new page, when you click the back button you will go back, but the grid is now different, it's the grid from /pages/test/data.js instead of from /js/data.js.  My issue is the same in that when I click the back button my previous page isn't loading its own data.js file to populate its grid and I don't know why.  


    Monday, April 15, 2013 1:45 PM
  • Looking at your steps above, I think what's happening is that the copy of data.js that you put into /pages/test/ is redefining members in the "Data" namespace. So when you navigate to the Test page, it's executing /pages/test/data.js and replacing the items that the listview in groupedItems.html is using.

    In your example, both /js/data.js and /pages/test/data.js contain the following code,

        WinJS.Namespace.define("Data", {
            items: groupedItems,
            groups: groupedItems.groups,
            getItemReference: getItemReference,
            getItemsFromGroup: getItemsFromGroup,
            resolveGroupReference: resolveGroupReference,
            resolveItemReference: resolveItemReference
        });

    In the file /pages/test/data.js, try changing "Data" to "TestData". If you have anything in the Test page that is accessing data from /pages/test/data.js, it will need to be updated to access it via the TestData namespace.

    I hope that helps,

    Joel

    • Marked as answer by ZachAtttack Tuesday, April 16, 2013 3:11 PM
    Tuesday, April 16, 2013 2:23 PM
  • I didn't understand the default code well enough to see that.  Very appreciated, thanks. 

    Tuesday, April 16, 2013 3:12 PM