1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
// Mobile Router
// =============
// Includes file dependencies
define([
"jquery",
"backbone",
"../models/CategoryModel",
"../collections/CategoriesCollection",
"../views/CategoryView"
], function( $, Backbone, CategoryModel, CategoriesCollection, CategoryView ) {
// Extends Backbone.Router
var CategoryRouter = Backbone.Router.extend( {
// The Router constructor
initialize: function() {
// 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 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();
},
// Backbone.js Routes
routes: {
// 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"
},
// Home method
home: function() {
// Programatically changes to the categories page
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
},
// Category method that passes in the type that is appended to the url hash
category: function(type) {
// Stores the current Category View inside of the currentView variable
var currentView = this[ type + "View" ];
// If there are no collections in the current Category View
if(!currentView.collection.length) {
// 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() {
// Programatically changes to the current categories page
$.mobile.changePage( "#" + type, { reverse: false, changeHash: false } );
} );
}
// If there already collections in the current Category View
else {
// Programatically changes to the current categories page
$.mobile.changePage( "#" + type, { reverse: false, changeHash: false } );
}
}
} );
// Returns the Router class
return CategoryRouter;
} );
|
