CODEWITHSUNDEEP
javascripthtmleventsmobiledojo
Padawan
Padawan

Reputation: 820

Dojo Toolkit 1.8.3 Mobile dojo/on Handler Event Switch Widget

I am trying to create a basic event handler for a dojox.mobile.Switch widget using the onStateChanged event. I am using dojo/on event handler module with respect to the new AMD architecture and having a hard time to get it to listen to my switch event.

Here is the HTML for the switch widget with id=mobileView

    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'../../app/images/i-      icon-1.png'">
      Mobile Version
    <div id="mobileView" class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
    </li>

Here is the JS code code. The second require is suppose to handle the switch event.

    require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme","dojox/mobile/compat", "dojo/domReady!"],
    function(parser) {
    parser.parse();
    });

    require(["dojo/on", "dijit/dijit"], 
    function(on){
    on(dijit.byId("mobileView"), 
    "onStateChanged", 
    function(newState){
    alert(newState);
    });
    });
    </script>

I can see that it is binding itself to the widget using dijit.byId, listening for the event onStateChanged, and calling the preceding function once the state changes. I am thinking it has something to do with having the correct modules included in the require, however I am not really sure. I have spent hours on this and have tried many different methods including the old way of dojo.connect.

Any help/tips would be greatly appreciated!

Reference: dojo/on Dojo Toolkit dojo/on

Upvotes: 1

Views: 534

Answers (1)

Jeremiah Orr
Jeremiah Orr

Reputation: 2630

In older versions of dojo, dojo.connect() handled both DOM events (click, focus, etc) and function calls on a widget.

However, the newer dojo/on module handles DOM events, and the dojo/aspect module handles function calls. Switch.onStateChanged() is a function, not a DOM event, so you want something like this:

require(["dojo/aspect", "dijit/registry"], function(aspect, registry) {
     aspect.after(registry.byId("mobileView"), "onStateChanged", 
       function(newState){
         alert(newState);
       }
     );
});

See http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html for more info.

Upvotes: 1

Related Questions