Il 23/11/2011 22:41, Adam Williams ha scritto:

This line https://github.com/azicchetti/jquerymobile-router/blob/master/js/jquery.mobile.router.js#L44 fails with '#next' as value of u.hash - routing does not work:

u.hash.indexOf("?") answers -1
u.hash.indexOf("?") !== -1 answers false
u.hash.indexOf("?") != -1 answers false
u.hash.indexOf("?") == -1 answers true

Am I missing something? I've been going around in circles to be sure I'm using the thing correctly. Also, it seems the syntax of the simple form of '#hash':'functionname' could be done as 'hash':'functionname'. There seems to be a lot of duplication in a routing file.

Hi,
can you provide an example so that I can see where the routing fails?
The code you've submitted provides support for parameters in the hash
part of the url (for example to something like this: #next?foo=bar) but
it's not relevant for basic routes.

The syntax requires the "#" because the router can also be used in
"ajax" mode, where pages are real html files fetched on demand by jquery
mobile, and as a result the routes would look like: "/mypage.html".
This is probably the main difference from a standard hash router.

I'll paste here a basic example to support a pagebeforeshow route for
the "#next" page:

--------- javascript ----------
var router=new $.mobile.Router({
"#next": "myHandler"
},{
myHandler: function(){
alert("It works!");
}

});

------- html, jquery mobile ----

..... standard jquery mobile multipage template

     <div data-role="content">
             <p>This is the next page.</p>
     </div>

.......

Cheers,
Andrea

from jquerymobile-router.

Thank you for the prompt reply!

I see now that I misunderstood at least one thing, probably more :) I think I'm
new enough to jQuery Mobile, and have a strong desire to think in Backbone
terms - at least in my experience with Backbone - that I don't yet grasp
exactly how things should hang together.

The code you've submitted provides support for parameters in the hash
part of the url (for example to something like this: #next?foo=bar) but
it's not relevant for basic routes.

I believe I now understand, and see how I misread the intention and behavior of
the condition statement. '#next' is not processed because it does not need to
have any query parameters removed.

I believe also that I now better understand the purpose of this router project,
especially as it relates to Backbone.js. Is it correctly stated:

jQuery Mobile hijacks anchors in order to:

1. Load the page referenced by the href
2. Change (transition) from the active page to the loaded page

When this process occurs, events are fired at various points.
jquery.mobile.router allows for a better approach to managing the various
handler functions associated with these events. Additionally, the project
adds the ability to have query parameters passed from one page to another, or
even the current page may link to itself with new parameter values and the
expected transition process is maintained.

jquery.mobile.router is similar to and replaces Backbone.Router in these
ways:

• You may group handlers in an Object - the ControllerObject in this project's documentation
• You may process changes to the browser's location hash

Since jQuery Mobile handles the hashchange event and introduces these page
transition events, and considering the fact that the whole 'page' concept
imposes new complexity, the Backbone.Router is insufficient for
defining the hashchange handlers needed. Therefore, it is expected that
instead of Backbone.Router, a project like this must be used.

A big question I have yet to fully resolve in my mind: Why not use the
Backbone.Router instead of the jQuery hashchange processing? I suspect at
least, but cannot state with confidence:

• Page nodes are inserted into and removed from the DOM appropriately
• Progressive enhancement is maintained
• ???

Thank you for bearing with me as I learn to leverage jQuery Mobile!

I'm interested in any comments you may have. Thanks for
the router, too ;)

from jquerymobile-router.

Il 24/11/2011 18:41, Adam Williams ha scritto:

I see now that I misunderstood at least one thing, probably more :) I think I'm
new enough to jQuery Mobile, and have a strong desire to think in Backbone
terms - at least in my experience with Backbone - that I don't yet grasp
exactly how things should hang together.

Oh don't worry, this is a very common issue for people with backbone
experience coming to jquery mobile.

I believe also that I now better understand the purpose of this router project,
especially as it relates to Backbone.js. Is it correctly stated:

jQuery Mobile hijacks anchors in order to:

1. Load the page referenced by the href
2. Change (transition) from the active page to the loaded page

When this process occurs, events are [fired at various points] [1].
jquery.mobile.router allows for a better approach to managing the various
handler functions associated with these events.

Yes, the basic idea was writing a router based on these 'native'
jquerymobile events instead of hashchange.

Additionally, the project
adds the ability to have query parameters passed from one page to another, or
even the current page may link to itself with new parameter values and the
expected transition process is maintained.

Exactly. We've managed to convince the developers of jquerymobile to
support parameters natively, but this feature will be added only in
future releases.

jquery.mobile.router is similar to and replaces Backbone.Router in these
ways:

• You may group handlers in an Object - the ControllerObject in this project's documentation
• You may process changes to the browser's location hash

Since jQuery Mobile handles the hashchange event and introduces these page
transition events, and considering the fact that the whole 'page' concept
[imposes new complexity] [2], the Backbone.Router is insufficient for
defining the hashchange handlers needed. Therefore, it is expected that
instead of Backbone.Router, a project like this must be used.

The original Backbone.Router can still be used with jquery mobile, but
I've ran into a couple of conflicts and limitations that I'll try to sum
up in the next paragraph.

A big question I have yet to fully resolve in my mind:Why not use the
Backbone.Router instead of the jQuery hashchange processing? I suspect at
least, but cannot state with confidence:

• Page nodes are inserted into and removed from the DOM appropriately
• Progressive enhancement is maintained
• ???

The main reason is to preserve a fine grained control over the flow of
the transition.

Without using page transition events it's impossible to know whether the
page has been shown or it's still hidden. This is particularly useful if
you have to do some "math" on dom nodes height or width, which, by
definition, works only when they're visible.

The pageinit event can be simulated with hashchange, but it requires
some logic in your application (things can get very complicated when
you're using ajax pages, which are automatically loaded, inserted and
removed from the dom by the framework). The same can be said of the
pageremove event.

Pagebeforecreate and pagecreate events can be used to manipulate the dom
before the widgets are initialized/enhanced by the framework.
I'm pretty sure that the whole concept of initialization and enhancement
is still quite obscure to most jquerymobile users and it can be fully
understood and exploited in your application only when it's approached
with the "right" tools (in this case, native events).

In addition, a router purely based on jquery mobile can help people
better organizing their code without forcing them to learn Backbone.

Thank you for bearing with me as I learn to leverage jQuery Mobile!

It's a pleasure!

Cheers,
Andrea

from jquerymobile-router.

Andrea, thank you for this excellent explanation. I have attempted to internalize it in a project I'm using to document what I'm learning: https://github.com/aiwilliams/bbjqm. The project currently uses Backbone.Router and disables the jQuery Mobile link handling, so I've got work to do. If you are willing, any feedback about the README.md on that project is welcome.

from jquerymobile-router.