Listview and binding. Getting repeated output

Question

I have managed to bind data obtained dynamically to a Listview, but I am having problems displaying it. I have followed quickstart and searched on line but am still stuck.

Here is the javascript

(function () {
    WinJS.UI.processAll();
    "use strict";


    var scores = new Object();

     
    var scored = new WinJS.Binding.List();
 
    function getScores() {
        
        document.getElementById('scoreListView').style.display = "block";
        document.getElementById('experimental').style.display = "none";
        document.getElementById('basicListView').style.display = "none";
        var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
        var scoreArray = roamingSettings.createContainer("scores", Windows.Storage.ApplicationDataCreateDisposition.Always);

        for (var x = 0; x < 12; x++) {
                      if (!scoreArray.values[x]) {
                scoreArray.values[x] = "No score recorded";
            }
            scores = { title: game.copiedSA[x].title, time: scoreArray.values[x], match: game.copiedSA[x].match };
           
            scored.push(WinJS.Binding.as(scores));
        }
      

The html is:

 <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">
        
                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: scored.time" style="width:100px;"></h4>

                <!-- Displays the "time" field. -->
                <h6 data-win-bind="innerText: 'time'"></h6>
            </div></div>
       
    <div id="scoreListView"
         data-win-control="WinJS.UI.ListView"
         data-win-options="{itemDataSource:getScores.scored.dataSource,
         itemTemplate: select('mediumListIconTextTemplate')}"></div>
        

Whatever I do I keep getting:

Have tried various options but I cannot get past this output.

Can anyone tell me where I am going wrong please?

Many thanks

Answer 1

Please post the rest of your code for this issue.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Sorry for late reply.

I could not log into my account yesterday for some unknown reason.

There's not a lot more code.

The namespace is

    WinJS.Namespace.define("getScores", {
        getScores: getScores,
        scored: scored
    });

The event listener handler (on a different js file - on the default.js page) for the get score button on the app bar is

    function scorePageHandler() {
        //only allow to view from menu or from success or help
        document.getElementById('successOuter').style.display = "none";
        document.getElementById('basicListView').style.display = "none";
        //show hide app bar buttons as needed
        document.getElementById('scorepage').style.display = "block";
        getScoreList();
        getScoreTemplate();

    }
    function scoreCloseHandler() {
        document.getElementById('scorepage').style.display = "none";
        document.getElementById('basicListView').style.display = "block";

    }

The namespace for these:

WinJS.Namespace.define('game', { game: game, copiedSA: copiedSA });

The event handlers are

        document.getElementById('barscorepage').addEventListener("click", getScores.getScores, false);
                document.getElementById('barclosescores').addEventListener("click", scoreCloseHandler, false);

The data for the games settings -

    var SettingsArray = [
    {index:  0,  title: "Easy Match", text: "Match 8 pairs of photos", picture: "images/listview/matcheasy.png", copies: 2, numdifferentpics: 8, match: 1 },
        { index: 6,  title: "Easy Memory", text: "Easy", picture: "images/listview/memoryeasy.png", copies: 2, numdifferentpics: 8, match: 0 },
    { index:  1,  title: "Medium Match", text: "Match 18 pairs of photos", picture: "images/listview/matchmedium.png", copies: 2, numdifferentpics: 18, match: 1 },
          { index:  7,  title: "Medium Memory", text: "", picture: "images/listview/memorymedium.png", copies: 2, numdifferentpics: 18, match: 0 },
    { index: 2,  title: "Hard Match", text: "Match 27 pairs of photos", picture: "images/listview/matchhard.png", copies: 2, numdifferentpics: 27, match: 1 },
      { index: 8,  title: "Hard Memory", text: "Find 27 pairs of photos", picture: "images/listview/memoryhard.png", copies: 2, numdifferentpics: 27, match: 0 }, //try adding image size
    { index: 3,  title: "Very Hard Match", text: "Match 36 pairs of photos", picture: "images/listview/matchveryhard.png", copies: 2, numdifferentpics: 36, match: 1 },
      { index: 9,  title: "Very Hard Memory", text: "Find 36 pairs of photos", picture: "images/listview/memoryveryhard.png", copies: 2, numdifferentpics: 36, match: 0 },
    { index:  4,  title: "Atrocious Match", text: "Match 50 pairs of photos", picture: "images/listview/matchatrocious.png", copies: 2, numdifferentpics: 50, match: 1 },
       { index: 10,  title: "Atrocious Memory", text: "Find 50 pairs of photos", picture: "images/listview/memoryatrocious.png", copies: 2, numdifferentpics: 50, match: 0 },
    { index: 5,  title: "Really Atrocious Match", text: "Match 80 pairs of photos", picture: "images/listview/matchreallyatrocious.png", copies: 2, numdifferentpics: 80, match: 1 },
      { index: 11,  title: "Really Atrocious Memory", text: "Find 80 pairs of photos", picture: "images/listview/memoryreallyatrocious.png", copies: 2, numdifferentpics: 80, match: 0 }

    ];
    var copiedSA = {};
    for (var x = 0; x < SettingsArray.length; x++) {
        copiedSA[x] = SettingsArray[x];}

I think that is all of it.

Many thanks.

Answer 3

Tried every which way, but still stuck.

Have decided to ditch listview and do it using standard js, html and css.