Comments (4)
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
answersfalse
u.hash.indexOf("?") != -1
answersfalse
u.hash.indexOf("?") == -1
answerstrue
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
Index
Next
<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:
- Load the page referenced by the href
- 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:
- Load the page referenced by the href
- 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.
Related Issues (20)
- Not an issue actually but the request to provide more advanced example HOT 3
- jQM 1.3.0 HOT 8
- Examples don't work HOT 2
- default handler not called HOT 3
- Routing issues with JQM 1.3.1 and knockout.js HOT 3
- Early Router - Too late for first page? HOT 2
- Debugging snippet gets in the way HOT 4
- URI parameters are striped out when using new pagebeforechange event HOT 4
- Loading the first page via bc handler HOT 6
- handler getting called twice even when step "url" selected HOT 1
- With requireJs, router initialises after jQuery Mobile page events trigger HOT 2
- How does one access the data object resultant from a $.mobile.navigate('#target',{}) invocation HOT 1
- production ready? HOT 1
- e.preventDefault() on a re-routing system HOT 1
- Are urls like this "#category/:id/items" possible? HOT 1
- Can this be used using two different html files? HOT 4
- Back Problem HOT 2
- Bower support HOT 1
- defaultHandler is not invoked when customer handlers are not specified
- Am I right that this plugin doesnt work in jqmobile 1.4.5 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquerymobile-router.