locked
Adding event handlers to child element created from Template RRS feed

  • Question

  • With a template defined as this, I would like to add pointer event handlers to the Canvas element once an element is created from the template:

    <div id="Template" data-win-control="WinJS.Binding.Template">
            <div>
                <canvas id="Canvas" width="640" height="200"/>
                <div data-win-bind="textContent:date" >                
                </div>
            </div>
    </div>
    

    I then create an instance of the element and I need to add event handlers to the inner canvas element.  How do I do that?

     

            var template = document.getElementById("Template").winControl;
    
            var page = document.getElementById("Page");
    
            template.render(pageElement).then(function (sketch) {
                var canvas = // How do I get the canvas element that was just created via the Template.render()?
                canvas.addEventListener("MSPointerDown", pointerDown, true);
                canvas.addEventListener("MSPointerUp", pointerUp, true);
                canvas.addEventListener("MSPointerMove", pointerMove, true);
    
    

    Thanks,

    Michael


    Michael S. Scherotter Media Experience Evangelist Microsoft Corporation http://blogs.msdn.com/synergist http://twitter.com/synergist http://facebook.com/synergist
    Thursday, September 22, 2011 4:27 PM

Answers

  • The completion value for the promised returned from the render function is the root of the elements making up the rendered template. In this case, this is your "sketch" parameter.

    To get the canvas, you could do this: sketch.querySelector('#Canvas');

    Two caveats to note:

    1. The canvas element should be written like this: <canvas></canvas> and NOT like <canvas />
    2. Using IDs in your templates can be problematic and you could get into naming collisions. Our recommendation is for your to use classes instead.

    Thursday, September 22, 2011 5:00 PM

All replies

  • The completion value for the promised returned from the render function is the root of the elements making up the rendered template. In this case, this is your "sketch" parameter.

    To get the canvas, you could do this: sketch.querySelector('#Canvas');

    Two caveats to note:

    1. The canvas element should be written like this: <canvas></canvas> and NOT like <canvas />
    2. Using IDs in your templates can be problematic and you could get into naming collisions. Our recommendation is for your to use classes instead.

    Thursday, September 22, 2011 5:00 PM
  • Thanks, David.

    sketch.querySelector("#canvas") return null, removing the id per your suggestion, sketch.querySelector("canvas") works now.

    Michael


    Michael S. Scherotter Media Experience Evangelist Microsoft Corporation http://blogs.msdn.com/synergist http://twitter.com/synergist http://facebook.com/synergist
    Thursday, September 22, 2011 5:15 PM
  • ID selectors (and class) are case sensitive. sketch.querySelector('#Canvas') should work for you if you used the ID.
    Thursday, September 22, 2011 6:06 PM