locked
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


    • Edited by chickfeed Wednesday, September 17, 2014 12:47 PM
    Wednesday, September 17, 2014 12:46 PM

Answers

All replies

  • 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.

    Thursday, September 18, 2014 12:04 PM
    Moderator
  • 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.

    Friday, September 19, 2014 8:51 AM
  • Tried every which way, but still stuck.

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

    Tuesday, September 30, 2014 8:10 AM