Demos: Fix backbone-requirejs demo acc. to new api

Closes #8477

Author: apsdehal

demos/backbone-requirejs/js/routers/mobileRouter.js

@@ -10,90 +10,91 @@ define([
 	"../views/CategoryView"
 ], function( $, Backbone, CategoryModel, CategoriesCollection, CategoryView ) {
 
-    // Extends Backbone.Router
-    var CategoryRouter = Backbone.Router.extend( {
+	// Extends Backbone.Router
+	var CategoryRouter = Backbone.Router.extend( {
+		hasInitialized: false,
 
-        // The Router constructor
-        initialize: function() {
+		// The Router constructor
+		initialize: function() {
 
-            this.pagecontainer = $( ".ui-pagecontainer" ).pagecontainer( "instance" );
+			// Instantiates a new Animal Category View
+			this.animalsView = new CategoryView( { el: "#animals", collection: new CategoriesCollection( [] , { type: "animals" } ) } );
 
-            // Instantiates a new Animal Category View
-            this.animalsView = new CategoryView( { el: "#animals", collection: new CategoriesCollection( [] , { type: "animals" } ) } );
+			// Instantiates a new Colors Category View
+			this.colorsView = new CategoryView( { el: "#colors", collection: new CategoriesCollection( [] , { type: "colors" } ) } );
 
-            // Instantiates a new Colors Category View
-            this.colorsView = new CategoryView( { el: "#colors", collection: new CategoriesCollection( [] , { type: "colors" } ) } );
+			// Instantiates a new Vehicles Category View
+			this.vehiclesView = new CategoryView( { el: "#vehicles", collection: new CategoriesCollection( [] , { type: "vehicles" } ) } );
 
-            // Instantiates a new Vehicles Category View
-            this.vehiclesView = new CategoryView( { el: "#vehicles", collection: new CategoriesCollection( [] , { type: "vehicles" } ) } );
+			// Tells Backbone to start watching for hashchange events
+			Backbone.history.start();
 
-            // Tells Backbone to start watching for hashchange events
-            Backbone.history.start();
+		},
 
-        },
+		// Backbone.js Routes
+		routes: {
 
-        // Backbone.js Routes
-        routes: {
+			// When there is no hash bang on the url, the home method is called
+			"": "home",
 
-            // When there is no hash bang on the url, the home method is called
-            "": "home",
+			// When #category? is on the url, the category method is called
+			"category?:type": "category"
 
-            // When #category? is on the url, the category method is called
-            "category?:type": "category"
+		},
 
-        },
+		// Home method
+		home: function() {
 
-        // Home method
-        home: function() {
-
-            // Programatically changes to the categories page
-            this.pagecontainer.change( "#categories", {
-				reverse: false,
-				changeHash: false
-			});
-
-        },
-
-        // Category method that passes in the type that is appended to the url hash
-        category: function(type) {
+			// Programatically changes to the categories page
+			if (this.hasInitialized) {
+				$( "body" ).pagecontainer( "change", "#categories", {
+					reverse: false,
+					changeUrl: false
+				} );
+			}
+		},
 
-            // Stores the current Category View  inside of the currentView variable
-            var currentView = this[ type + "View" ];
+		// Category method that passes in the type that is appended to the url hash
+		category: function(type) {
+			this.hasInitialized = true;
+			// Stores the current Category View  inside of the currentView variable
+			var currentView = this[ type + "View" ];
+			var that = this;
 
-            // If there are no collections in the current Category View
-            if(!currentView.collection.length) {
+			// If there are no collections in the current Category View
+			if(!currentView.collection.length) {
 
-                // Show's the jQuery Mobile loading icon
-                $.mobile.loading( "show" );
+				// Show's the jQuery Mobile loading icon
+				$.mobile.loading( "show" );
 
-                // Fetches the Collection of Category Models for the current Category View
-                currentView.collection.fetch().done( function() {
+				// Fetches the Collection of Category Models for the current Category View
+				currentView.collection.fetch().done( function() {
 
-                    // Programatically changes to the current categories page
-                    this.pagecontainer.change( "#" + type, {
+					// Programatically changes to the current categories page
+					$( "body" ).pagecontainer( "change", "#" + type, {
 						reverse: false,
-						changeHash: false
+						changeUrl: false
 					});
-                } );
+				} );
 
-            }
+			}
 
-            // If there already collections in the current Category View
-            else {
+			// If there already collections in the current Category View
+			else {
 
-                // Programatically changes to the current categories page
-                this.pagecontainer.change( "#" + type, {
+				// Programatically changes to the current categories page
+				$( "body" ).pagecontainer( "change", "#" + type, {
 					reverse: false,
-					changeHash: false
+					changeUrl: false
 				});
 
-            }
+			}
 
-        }
+		}
 
-    } );
+	} );
 
-    // Returns the Router class
-    return CategoryRouter;
+	// Returns the Router class
+	return CategoryRouter;
 
 } );