locked
Populate innerText with data

    Question

  • Hi there.

    I've created a data.js file and have managed to fill a listView with the data correctly.  I wanted to use the same data and populate some innerText information as well, but I'm having trouble with that.  

    The working ListView:

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="mediumListIconTextItem"> <img src="#" style="width: 50px; height: 50px;" class="mediumListIconTextItem-Image" data-win-bind="src: picture" /> <div class="mediumListIconTextItem-Detail"> <h4 data-win-bind="innerText: fname" style="width: 319px;"></h4> <h6 data-win-bind="innerText: lname"></h6> </div> </div> </div> <div id="pageDivided"> <div id ="listView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource: DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), selectionMode: 'single', tapBehavior: 'toggleSelect', swipeBehavior: 'select', layout: { type: WinJS.UI.ListLayout } }" style="width: 350px;">

    </div>

    And my not-working text code found just below the code above

    <div id="demoForm">
    	<div class="win-type-x-large" data-win-bind="innerText: fullname">
            	<p id="name">Fname Lname</p>
            </div>
    	<div id="interiorDemo" data-win-options="{itemDataSource: DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
    		<div id="ssnF" class="win-type-large" data-win-bind="innerText: ssn">
    			<p><strong>Social Security:</strong></p>
    			<p id="ssn">555789452</p>
    		</div>

    I expected the the data-win-bind to see the ssn and replace the filler text I have with the text from the data file.  

    And my data file, just in case you were wondering:

    (function () {
        "use strict"
    
        var dataArray = [
            { fname: "Barry", lname: "Charles", ssn: "144-44-4444", dob: "1-2-1958", nationality: "American", picture: "/images/storelogo.png" },
            { fname: "Tim", lname: "Sanders", ssn: "244-44-4444", dob: "2-2-1958", nationality: "American", picture: "/images/storelogo.png" },
            { fname: "Jeff", lname: "Edwards", ssn: "144-44-4444", dob: "13-2-1958", nationality: "American", picture: "/images/storelogo.png" }
        ];
    
        var dataList = new WinJS.Binding.List(dataArray);
    
        //makes the data public to others parts of the app
        var publicMembers =
            {
                itemList: dataList
            };
        WinJS.Namespace.define("DataExample", publicMembers);
    })();

    Thanks,

    Zach


    • Edited by ZachAtttack Monday, April 15, 2013 8:22 PM clean up code legibility and added data.js
    Monday, April 15, 2013 8:16 PM

Answers

  • You can do something like this:

    HTML:
    =====
        <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
            <p><strong>Social Security:</strong></p>
            <div data-win-bind="innerText: ssn"></div>
        </div>

     <div id="interiorDemo">
            <div id="ssnF" class="win-type-large">
      </div>
        </div>

    JS:
    ====
                args.setPromise(WinJS.UI.processAll().done(function () {
                    displayItems();
                }));

        function displayItems() {
            var templateElement = document.getElementById("itemTemplate");
            var targetElement = document.getElementById("ssnF");

            WinJS.Utilities.empty(targetElement);
            for (var i = 0; i < DataExample.itemList.length; i++) {
                templateElement.winControl.render(DataExample.itemList.getAt(i), targetElement);
            }
        }


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz


    Monday, April 15, 2013 11:00 PM
    Moderator

All replies

  • You can do something like this:

    HTML:
    =====
        <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
            <p><strong>Social Security:</strong></p>
            <div data-win-bind="innerText: ssn"></div>
        </div>

     <div id="interiorDemo">
            <div id="ssnF" class="win-type-large">
      </div>
        </div>

    JS:
    ====
                args.setPromise(WinJS.UI.processAll().done(function () {
                    displayItems();
                }));

        function displayItems() {
            var templateElement = document.getElementById("itemTemplate");
            var targetElement = document.getElementById("ssnF");

            WinJS.Utilities.empty(targetElement);
            for (var i = 0; i < DataExample.itemList.length; i++) {
                templateElement.winControl.render(DataExample.itemList.getAt(i), targetElement);
            }
        }


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz


    Monday, April 15, 2013 11:00 PM
    Moderator
  • In your code I plugged it in and the publicMembers.itemList was throwing an error, it's supposed to be DataExample.itemList.  If you could edit it to be that I will mark you as the correct answer. I don't want to lead people who see this astray. 

    Thanks for the help! :)

    Wednesday, April 17, 2013 3:07 PM
  • Hi Zach,

    In the code example I provided, both the DataExample as well as the publicMembers variable work since I had declared the publicMembers variable outside the main functions, and made it available to all parts of the JS. However I have changed the variable in the displayItems() above, so that it can be used correctly.

    Thanks,

    Prashant


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz


    Wednesday, April 17, 2013 5:09 PM
    Moderator
  • Ah that makes sense. Yeah I was just plugging it into my code. Thanks for the change!
    Wednesday, April 17, 2013 5:37 PM