locked
Wanting to Draw to a HTML5 canvas inside a WinJS.UI.ListView

    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>
                        <div class="item-summary2" data-win-bind="textContent: summary2">
                        </div>
                        <div class="item-summary3" data-win-bind="textContent: summary3">
                        </div>
                        &nbsp;
                    </div>
                </div>
                <div id="legislaturelistview" data-win-control="WinJS.UI.ListView" class="item-legislature"
                    data-win-options="{itemRenderer: legislatorTemplate}">
                </div>
            </div>
    



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

Answers

  • 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


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