azicchetti / jquerymobile-router

A router/controller for jquery mobile. Also adds support for client-side parameters in the hash part of the url. The routes handles regexp based routes. This plugin can be used alone or (better) with Backbone.js or Spine.js, because it's originally meant to replace their router with something integrated with jQM.
GNU General Public License v2.0
402 stars 69 forks source link

Nested Lists #49

Open knightcode opened 12 years ago

knightcode commented 12 years ago

I have a page with a few nested lists, which JQM renders into a multi-paged document where each list has an attribute like data-url=index&ui-page=#-# where each # is a number assigned to the list. I also suspect that index is taken from the original page's url.

When the page renders, I'm getting this error from query.mobile.router.js

line: 35
message: "Method "" does not exist"
sourceId: 5821973440
sourceURL: "http://pj.sulia.com:9090/static/compressed/r12210/mobile/js/deps/backbone-min.js"
__proto__: Error

It seems to be generated once for each list, both parent and children.

Also, the router is firing events with a url that's just index, which exactly matches the main page. Is this intentional or a JQM issue? It would be more helpful if I could differentiate the creation events of the main page from the lists.

knightcode commented 12 years ago

Found the cause of my error. I forgot to fill in the events property of my Backbone View.

Differentiating the path given to handlers is still a question, though.

azicchetti commented 12 years ago

Hi, the error is probably thrown by some code executed in an handler bound with the router (probably the #index handler).

As you've noticed, the typical url built by jquery mobile is in this form: #sourcepage&ui-page=something To match this url, you need a smart regular expression, 'cause a simple #sourcepage regexp (#index in your case) would match for every single page, even the nested ones.

For instance, you could use:

"#index([?&].*)?": "yourHandler"

This will match urls with hash parameters (#index?id=foo&bar=baz) and nested pages (#index&ui-page=foo-1). By examining the second group in the regular expression result (match[1]) you can find out which subpage is being rendered.

edit: You may also want to use two different regexp's for the main page:

"#index$"

and for the subpages:

"#index[&](.*)"

Cheers, Andrea

knightcode commented 12 years ago

Hi,

Thanks for the info. But I'm actually using this regex for the main page:

"^index$"

And the problem is that all the pages are matching it despite each of JQM's pages for the sublists having something like:

data-url="index&ui-page=0-0"

I would construct a separate regex for the sublists if it seemed like JQM (or something) reported a different route/path for them, but that doesn't seem to be what's happening.

I should note that I have this problem this is the initial page being loaded. Haven't yet observed its behavior when navigating to the page.

As a work-around, I've found that the main page has a class called 'ui-body-c' where the sub list pages have 'ui-body-null'. I can check for the class in my handler and differentiate the actions to take.... but it's a hack.

knightcode commented 12 years ago

Hi,

Seems to happen when navigating to the page as well except that the path/route is the appropriate url of the page. So, for instance, with a url like:

/foo/bar/

and a regex:

"/foo/bar/(?:[^#]*)?$"

fires the associated handler multiple times, say for the 'pageinit' event, with match[0] == '/foo/bar/'.

Let me know if I'm doing something wrong or if I can help debug at all. Thank you!

azicchetti commented 12 years ago

Hi, the suggested solution should work for a single-file multipage template (that is to say, your application doesn't load pages through ajax).

In order to debug this issue, I need to know whether you're using ajax or not. The "^index$" regexp shouldn't match in a multipage environment, due to the missing "#".

Could you please send me a zip file with your test case?

Thank you.