locked
How to add event handler for Control in Template ? RRS feed

  • Question

  • I want add Load+ Change event for select control ,how do I do that ? Please help me , thanks every one !Here is my code :

    <body>
        <!-- These templates are used to display each item in the ListView declared below. -->
        <div id="headerTem" class="headerTemplate" data-win-control="WinJS.Binding.Template">
           <div id="styleSelect" class="styled-select">		  			
                <select id="coboBoxCate" ></select>	   
           </div> 
        </div>
        <div id="templateMain" class="itemtemplate" data-win-control="WinJS.Binding.Template">
                </div>
        <div id="templateLoadMore" class="itemtemplate" data-win-control="WinJS.Binding.Template">
        </div>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment groupeditemspage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span id="parap" class="pagetitle">AppName</span>
                </h1>
                <button id="btn"></button>
            </header>
            <section aria-label="Main content" role="main">
                <div  id="groupeditemslist_ID" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
            </section>
        </div>
    </body>
    
    
    
    

    • Edited by Andy_Luu Monday, July 30, 2012 9:44 AM
    Saturday, July 28, 2012 2:29 AM

Answers

  • The render method takes two parameters; a context object and a container. You can read more about the render method here: http://msdn.microsoft.com/en-us/library/windows/apps/br229724.aspx

    When you pass the 'Change' function to the event listener, you don't need to write the parentheses.

    This is how your code could look like:

    var tempate = document.getElementById("headerTem").winControl;
    //var renderTarget = // TODO: Add where the template should be rendered into.
    template.render({}, renderTarget).done(function(element) {
        var cbb = element.querySelector("#coboBoxCate");
        cbb.addEventListener("change", Change, false);
    });

    • Marked as answer by Andy_Luu Tuesday, July 31, 2012 8:36 AM
    Monday, July 30, 2012 6:04 PM

All replies

  • The 'select' element does not support onLoad events.

    Here is an event listener for onChange:

    document.getElementById("coboBoxCate").addEventListener("change", function (event) {
           // Do something...
    });

    Remember to add the event listener after you render the template.

    Saturday, July 28, 2012 9:57 AM
  • Thanks Aratys , It do work but it just run only one when the page initialized

    Then I change options and It doesn't work !

    In ready of PageControl, I declared :

    ui.Pages.define("/pages/groupedItems/groupedItems.html", { ready: function (element, options) {

    var templ = new WinJS.Binding.Template(element.querySelector("#headerTem")); templ.render().then(function(sketch) { var cbb = sketch.querySelector("#coboBoxCate"); cbb.addEventListener("change",Change(),false); }); }, }); function Change(event) { //setdata

    }

    Why ?



    • Edited by Andy_Luu Monday, July 30, 2012 9:08 AM
    Monday, July 30, 2012 2:15 AM
  • The render method takes two parameters; a context object and a container. You can read more about the render method here: http://msdn.microsoft.com/en-us/library/windows/apps/br229724.aspx

    When you pass the 'Change' function to the event listener, you don't need to write the parentheses.

    This is how your code could look like:

    var tempate = document.getElementById("headerTem").winControl;
    //var renderTarget = // TODO: Add where the template should be rendered into.
    template.render({}, renderTarget).done(function(element) {
        var cbb = element.querySelector("#coboBoxCate");
        cbb.addEventListener("change", Change, false);
    });

    • Marked as answer by Andy_Luu Tuesday, July 31, 2012 8:36 AM
    Monday, July 30, 2012 6:04 PM
  • @ Aratys : thank so much ^^! I  have seen my problem, it's renderTarget
    • Edited by Andy_Luu Wednesday, August 1, 2012 8:01 AM
    Wednesday, August 1, 2012 7:58 AM