azicchetti/jquerymobile-router

default handler not called

Opened this issue · 3 comments

A typo has cost me a couple of hours to track done, since the default handler was not called:

return new $.mobile.Router({
            ... 

            "#tourselect"       : { handler: 'tourSelectHandler', events: 'bs'},

        }, {
                ...

                tourSelectHandler: function() {
                    require(['views/tour-select-view'], 
                        function(TourSelectView) {
                            new TourSelectView().render();
                        }
                    );
                },

                'default': function() {
                    console.log('No route found.');
                }


        }, {
                ajaxApp: true,
                defaultHandler: 'default'
           }
       );

Instead of tourSelectHandler the handler was tourselectHandler. Could that be a bug?

Hi,
in order to use the defaultHandler option you should also define "defaultHandlerEvents".
I think the documentation is lacking here, I'll fix it.

However, you found a bug, because the defaultHandler was only working with function references and not strings, like in your example.
I'm pushing the fix on the git.

To sum this up, just add:

        defaultHandlerEvents: 'bs'

under the defaultHandler property and it should work.

p.s.:
if you're using local pages, I guess you can remove the ajaxApp property

Thanks.

Another thing I run into is the following:

"#item"             : { handler: 'itemHandler', events: 'bs'},
"#itemgroup"     : { handler: 'itemGroupHandler', events: 'bs'}

If the itemgroup route is triggered the router first invokes itemHandler and then itemGroupHandler.

Am I doing something wrong?

Stephan

The "#item" string, when transformed into a regexp, matches both #item and #itemgroup.

To prevent this, you must put a $ to the end of your string, as in: #item$
This is pointed out in the documentation, just search the string: 'double check your regular expressions'.

To be on the safe side, always put "(?:[?](.*))?$" to the end of your routes:

{ "#item(?:[?](.*))?$": "itemHandler" },

This way you can also use the router.getParams() function to get url parameters in a nice javascript object.