Wanting to Draw to a HTML5 canvas inside a WinJS.UI.ListView RRS feed

  • Question

  • I've got a listview that I've successfully put an image and some text in.  Now, I want to create a canvas, put that in the template (I know how to do that), but I want to draw on that canvas differently for each item.  That is, I have 50 states and I want to draw the outline of each state inside the listview item.

    My template currently looks like:

     <div id="content">
                <div id="legislatorTemplate" data-win-control="WinJS.Binding.Template">
                    <div id="item-legislatorcontainer">
                        <img data-win-bind="src: govtrack_id convertGovTrackIdToImgTag" alt="Databound image" />
                        <div class="item-summary1" data-win-bind="textContent: summary1">
                        <div class="item-summary2" data-win-bind="textContent: summary2">
                        <div class="item-summary3" data-win-bind="textContent: summary3">
                <div id="legislaturelistview" data-win-control="WinJS.UI.ListView" class="item-legislature"
                    data-win-options="{itemRenderer: legislatorTemplate}">

    Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider
    Tuesday, January 3, 2012 3:48 AM


  • Hi Peter,

    You could iterate over the DOM after you have populated the listview and get the children of legislaturelistview. Once you have the children you can select the div you have reserved for drawing.  The key could be one of the other divs or an attribute you set (like id=statename).


    Jeff Sanders (MSFT)
    Wednesday, January 4, 2012 7:09 PM