Displaying JavaScript Objects in an HTML Table Using WinJS

Question

Currently I have my images and a title for them displaying like so in my Windows 8 App:

 <table>
    <tbody>
        <tr>
            <td>Image 1 Name</td>
            <td>Image 2 Name</td>
            <td>Image 3 Name</td>
        </tr>
        <tr>
            <td>
                <img src="/images/image1.jpg" width="125" height="125">
            </td>
            <td>
                <img src="/images/image2.jpg" width="125" height="125">
            </td>
                <img src="/images/image3.jpg" width="125" height="125">
            </td>
        </tr>
    </tbody>
</table>

However, I would like to be able to make an array of these items using JavaScript and display them via data binding with WinJS. Currently I have made the array of objects like so:

    function initialize() {
    var images = [
        { name: "Image 1", photo: "/images/Image1.jpg" },
        { name: "Image 2", photo: "/images/Image2.jpg" },
        { name: "Image 3", photo: "/images/Image2.jpg" },
    ];

    var imagesList = new WinJS.Binding.List(images, { binding: true });

    WinJS.Binding.processAll(null, imagesList);
    };

document.addEventListener("DOMContentLoaded", initialize);

I tried altering the HTML by adding span tags within the td tags and data-win-bind to display the content, but I keep getting undefined.

Answer 1

Give an id to your table and then try to replace:

WinJS.Binding.processAll(null, imagesList);

with:

var myTable = document.getElementById("my-table"); //give this ID to your table
WinJS.Binding.processAll(myTable, imagesList);

this shuold attach your object to the table so that when you use a data-win-bind it knows what object to refer to.

Also I suggest you use a WinJS.UI.Repeater to create your table. http://msdn.microsoft.com/en-us/library/windows/apps/dn301916.aspx