locked
binding the onchange event of ToggleSwitch RRS feed

  • Question

  • Hi,

    I'm trying to bind the onchange event of the ToggleSwitch but it didn't work. Can anyone tell me how to do it correctly?

    <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
    
        <div data-win-control="WinJS.UI.ToggleSwitch" data-win-bind="winControl.onchange: toggleOnOffMethod"></div>
    
    </div>

    Thanks


    Thursday, May 24, 2012 11:17 AM

Answers

All replies

  • Here you go:

    <div class="itemTemplate" data-win-control="WinJS.Binding.Template">

       
    <div id="myToggle" data-win-control="WinJS.UI.ToggleSwitch" ></div>

    </div>

    In code do this after WinJS.ProcessAll() or in the ready: function:

    WinJS.UI.getControl(document.getElementById("myToggle")).addEventListener("change", function (e) { //do toggle stuff here

    }, false);


    Jeff Sanders (MSFT)

    Thursday, May 24, 2012 6:52 PM
    Moderator
  • Two things here: first, you don't need to use data-win-bind here. Put the assignment in data-win-options (without the winControl--that's only needed in data-win-bind).

    Either way, the toggleOnOffMethod also has to be globally visible. If it's defined within a module like default.js, where there's a (function() {} )(); around everything, then it's not globally visible. In that case, export the function from the module using a namespace (rather than making it truly global), e.g.

    WinJS.Namespace.define("MyApp", {
        toggleOnOffMethod: function(...)
    });

    Then refer to MyApp.toggleOnOffMethod in data-win-options or data-win-bind.

    Let me know if this works, because you should be able to assign event handlers declaratively, but the handlers need to be visible through something in the global namespace.


    Thursday, May 24, 2012 11:57 PM
  • Thanks jpsanders for your response. I've tried the solution you proposed and got the following exception:

    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getControl'

    If there is a handler for this exception, the program may be safely continued.

    The problem is that I'm adding those ToggleSwitch's inside a template and I don't know how many I'll need so setting the "id" might not be a good idea.

    Thanks.

    Sunday, May 27, 2012 6:40 AM
  • Thanks Kraig for you response, but sadely it didn't work !

    What I really want is to define "toggleOnOffMethod" on the object that I'm binding to so that I can interact with it as the data context for the ToggleSwitch. In other words there is an id for each data context object something like that:

    var myObj = {
      id: "obj_1",
      enabled: true,
      toggleOnOff: function () { 
        if (this.enabled) { /* doSomething(); */ }
        else { /* doSomethingElse(); */ }
      }
    };

    The wired thing is that when I tried it with a normal html control it worked perfectly without any need to expose it globally or through a namespace !!

    <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
    
        <input type="checkbox" data-win-bind="onchange: toggleOnOffMethod"></div>
    
    </div>

    But this solution would require me to implement my own style to make the checkbox look as a switch and I really don't want to do that !

    Thanks.



    Sunday, May 27, 2012 7:05 AM
  • If I understand you Mousa, you simply want to be able to bind the data to the control?  If so here is how to accomplish that:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/88bc89ca-529f-4d58-b10b-c0b1a5d275d7

    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 12:35 PM
    Moderator
  • Have you examined the this variable inside the event handler? In the toggleswitch sample, it just has this:

    <div id="wifiToggle"
        data-win-control="WinJS.UI.ToggleSwitch"
        data-win-options="{title: 'WiFi', checked: true, onchange: toggleWifi}">

    where toggleWifi is a global function:

    function toggleWifi () {
        var obj = document.getElementById("wifiToggle").winControl;
        console.log("Wifi toggled. Current status: " + (obj.checked ? "on" : "off"));
    }

    I can replace the document.getElementById with "this" and it works the same.

    Haven't tried it with something in a template, but you can see if the this value in the handler is already the particular control, in which case you have the element and the winControl object there already.

    Tuesday, May 29, 2012 10:28 PM