Response title
This is preview!
Application Details
The application requires user to LOGIN and has
- Main Navigation menu bar
- Pages with and without left menu bar and each page can have multiple entry points
Requirements
- Bookmarking - User should be taken directly to the bookmarked page after successful login
- Bowser back button support
Routing patterns
":nav/:page" - List pages (eg category/products, accounting/orders)
":nav/:page/:id" - Details page (eg category/products/1)
":nav/:page/:id/:leftmenu_item" - Details page with leftmenu (eg accounting/orders/1/shipping_adress, accounting/orders/1/summary)
Design
- All the Routes are handled in one controller
- Routes are not split between controller as controllers required for a page are created only when user navigates to that page.
- Hash is changed in controller event handlers after successfully displaying of page using $.route.attrs()
- flag is set on body using $("body").data("routed", "yes") to differentiate if the route change event is triggered by processing bookmark links or browser back button or change of properties on $.route
* it will be nice if we can control the event firing when $.route.attrs() is used and that way we need not use the flag
Code
// steal the following in main controller
steal("jquery/controller/route",
"jquery/lang/observe/delegate") // will require this if you want to use delegate on route
$.Controller("MYAPP.Login",
/* @Static */
{
},
/* @Prototype */
{
"init": function(){
//prevent setting of $.route.data based upon the routes and the current hash
$.route.ready(false);
// empty default are required for pretty urls like /category/products, accounting/orders
$.route(":nav/:page", { "nav": "", "page": ""});
$.route(":nav/:page/:id", { "nav": "", "page": "", "id": "" });
$.route(":nav/:page/:id/:leftmenu_item", { "nav": "", "page": "", "id": "", "leftmenu_item": ""});
this.display();
},
"display": function(){
// display login page
},
"#login_button click": function(element, event){
event.preventDefault(); // if button is anchor it will prevent setting the hash
// authenticate and call authenticationSuccess
},
"authenticationSuccess": function(){
// Indicates that all routes have been added and sets $.route.data
// based upon the routes and the current hash.
$.route.ready(true);
// no hash - display default page
if($.isEmptyObject($.route.attrs())){
// the below code is sometimes failing to trigger the event. Hence changing the hash manually
// $.route.attrs({ "nav": "category", "page": "category"}, true);
location.hash = $.route.url({ "nav": "category", "page": "category"});
$.route.ready(true);
}
// in case of bookmark link with some hash, hash change event is triggered
},
"authenticationFailed": function(){
// reset the routed flag
this.resetRoute();
this.display();
},
"resetRoute": function(){
$.route.ready(false);
this.resetRouted();
},
"isRouted": function(){
// flag to check if route change is triggered by processing bookmark, browser
// back button or setting of hash using $.route.attrs();
return "yes" === ($("body").data("routed") || "");
},
"resetRouted": function(){
$("body").data("routed", "no");
},
"routeTo": function(routeData){
//check to avoid re-rendering of page as route change is also triggered when
// hash is set after successful display of a page
if(!this.isRouted()){
// routeData is js object like {"nav": "something", "page": "bar", "id": 1, "leftmenu_item": "foo"}
// this is just an example ... not all attributes are set ... routeData is populated depending on hashvalue
// get the nav, page, id, leftmenu_item from routeDate
// and display the corresponding page
}
this.resetRouted();
},
":nav/:page route": function(routeData){
this.routeTo(routeData);
},
":nav/:page/:id route": function(routeData){
this.routeTo(routeData);
},
":nav/:page/:id/:leftmenu_item route": function(routeData){
this.routeTo(routeData);
}
});
// steal the following in all event handler controllers - where route.attrs() is used
steal("jquery/dom/route")
// In controller event handlers after displaying the page set the hash and routed flag
event.preventDefault(); // if button is anchor it will prevent setting the hash
$.route.attrs({"nav": "accounting","page": "orders","id": 1,"leftmenu_item": "shipping_adress"}, true);
// setting the flag to avoid re-rendering of the page. This flag is used in Login controller
$("body").data("routed", "yes");
1
