Question

I am pretty sure this question is all about regex.

I am using the JQM router plugin found here. It uses regex to match up pages and bind event handlers. In the docs it states:

A typical mistake is forgetting the $ operator. If you have two pages,
such as #product and #productList, a hypothetical route “#product”
would match both pages, leading to unexpected behaviors

Ok. So I have an #item page and an #items page so I prefixed #item with a $. But now it doesn’t bind the event handler at all. If i dont use the dollar then the binding for item gets applied to both pages. This is the actual implementation:

var router = new $.mobile.Router([
    {"#items": {events:"i", handler: items.controller.init}},
    {"#items(?:[?/](.*))?": {events:"bs", handler: items.controller.onPageBeforeShow}},

    {"#item": {events:"i", handler: item.controller.init}},
    {"#item(?:[?/](.*))?": {events:"bs", handler: item.controller.onPageBeforeShow}},

]);

Answer 1

The $ matches the end of the string in regex. You don’t want to put it at the beginning, you want it at the end.

For example:

#product
  matches
#product
#productList

#product$
  matches
#product

Try this code:

var router = new $.mobile.Router([
    {"#items$": {events:"i", handler: items.controller.init}},
    {"#items(?:[?/](.*))?$": {events:"bs", handler: items.controller.onPageBeforeShow}},

    {"#item$": {events:"i", handler: item.controller.init}},
    {"#item(?:[?/](.*))?$": {events:"bs", handler: item.controller.onPageBeforeShow}},

]);