Windows store js app navigation control cause data binding problems

Question

// file.html

        <div id="RankingTemplate" data-win-control="WinJS.Binding.Template" >
            <h2>
                <span class="Number" data-win-bind="innerText:place"></span>

                <span id="ratingControlDiv"
                      data-win-control="WinJS.UI.Rating"
                      data-win-bind="winControl.averageRating: rating"
                      data-win-options="{maxRating:5,disabled:true}"></span>

                <label for="ratingControlDiv" data-win-bind="innerText : votes"></label>
                <span class="Name" data-win-bind="innerText : title"></span>
            </h2>
        </div>

        <div id="RankingList"
             data-win-control="WinJS.UI.ListView"
             data-win-options="{
                    itemDataSource : sourceData.itemRankingData.dataSource,
                    itemTemplate : RankingTemplate,
                    tapBehavior: 'none',
                    swipeBehavior : 'none',
                    layout: {type: WinJS.UI.ListLayout}
                }"></div>

// file.js

var dataRankingArray = [
    {
        place: 1,
        rating: 4.75,
        votes: "(2500000 votes)",
        title: "Marius"
    },
    {
        place: 2,
        rating: 4.5,
        votes: "(190 votes)",
        title: "Napolis"
    },
    {
        place: 3,
        rating: 3.8,
        votes: "(200 votes)",
        title: "Oliva Restaurant"
    },
    {
        place: 4,
        rating: 3.42,
        votes: "(215 votes)",
        title: "Tucano Coffe"
    },
    {
        place: 5,
        rating: 3.1,
        votes: "(197 votes)",
        title: "Robert's Coffe"
    }
];

var dataRankingList = new WinJS.Binding.List(dataRankingArray);

   var publicMembers =
    {

        itemRankingData: dataRankingList
    };
WinJS.Namespace.define("sourceData", publicMembers);

//screenshoots

When the app is loaded the homepage look like in the before image, and all is working correctly.

before http://imgur.com/0BCpUeP

When I try to navigate from the current page(Home) , to the same page (Home) with the navigation control the list isn't loading the template.And the result is shown in the next image.

after http://imgur.com/rEoQLRd

Answer 1

Most likely this issue is because navigator.js out of the box doesn't support same-page navigation; the old page unloads after the new page loads. The two easier fixes are:

• Separate your page initialization code to a separate function (eg., move it out of ready() function), and instead of reloading the page, just call the initialization function.
• Use Win8 version of navigator.js, which I believe has different behavior.

If you just need to update your data, you could use code like this instead of reloading the page:

var lv = document.getElementById("RankingList");
lv.itemDataSource = sourceData.itemRankingData.dataSource;