adding first fully functional split between client-side pagination an…

…d server-side pagination components

app.js

@@ -5,20 +5,20 @@ var App = {
 	mixins : {},
 	init : function () {	
 
+		//Client
+		var clientTags  = new App.collections.TagsClient();
+		App.views.tagsClient = new App.views.TagsClient({collection: clientTags});
+		App.views.clientPaging = new App.views.clientPagination({collection: clientTags});
 
-		App.collections.tagsClient  = new App.collections.TagsClient();
-		App.collections.tagsServer  = new App.collections.TagsServer();
-
-		//App.views.tagsClient = new App.views.TagsClient({collection:App.collections.tagsClient});
-		App.views.tagsServer = new App.views.TagsServer({collection:App.collections.tagsServer});
-
-		//App.views.clientPaging = new App.views.clientPagination({collection:App.collections.tagsClient});
-		App.views.serverPaging = new App.views.serverPagination({collection:App.collections.tagsServer});
-		//App.views.serverPaging.render();
+		//Server
+		var serverTags = new App.collections.TagsServer();
+		App.views.serverView = new App.views.TagsServer({collection: serverTags});
+		App.views.serverPaging = new App.views.serverPagination({collection:serverTags});
 
 	}
 };
 
 $(function(){
 	App.init();
-});
+});
+

collections/tagsClient.js

@@ -1,4 +1,5 @@
 (function (collections, clientPaginator, model) {
+
     collections.TagsClient = Backbone.Collection.extend({
         model : model,
 

collections/tagsServer.js

@@ -1,9 +1,9 @@
 (function (collections, serverPaginator,  model) {
 
-
     collections.TagsServer = Backbone.Collection.extend({
         model : model,
 
+
         url: 'http://odata.netflix.com/v2/Catalog/Titles?&',
 
         sync : function (method, model, options) {
@@ -23,6 +23,7 @@
         parse : function (response) {
             // Be sure to change this based on how your results
             // are structured
+            console.log(response);
             var tags = response.d.results;
             this.queryParams.totalPages = response.d.__count;
             return tags;

indexOData.html → index.html

@@ -44,6 +44,7 @@ <h3>Credits</h3>
 
 		</div>
 
+		<!-- client pagination -->
 		<script type="text/html" id="tmpClientPagination">
 		 <div class="breadcrumb">
 
@@ -100,16 +101,17 @@ <h3>Credits</h3>
 
 
 
-Current problem seems to be template:
-
+		<!-- server pagination -->
 		<script type="text/html" id="tmpServerPagination">
 			<div class="breadcrumb">
 			    Ajax query for next/prev pages:
 			  	<span class="cell ">
 
 					<% if (queryPage > 1) { %>
 						<a href="#" class="serverprevious">Previous</a>
-					<% } %>
+					<% }else{ %>
+						<span>Previous</span>
+					<% }%>
 
 					<% if (queryPage < queryTotalPages) { %>
 						<a href="#" class="servernext">Next</a>
@@ -133,6 +135,8 @@ <h3>Credits</h3>
 
 
 
+		<!-- scripts-->
+
 		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 		<script src="libs/underscore.js"></script>
 		<script src="libs/json2.js"></script>
@@ -146,14 +150,13 @@ <h3>Credits</h3>
 		<script src="utils/backbone.paginator.server.js"></script>
 
 		<!--Models/Collections-->
-		<script src="models/tag.js"></script>
-		<script src="collections/tagsClient.js"></script>
-		<script src="collections/tagsServer.js"></script>
+		<script src="models/Tag.js"></script>
+		<script src="collections/TagsClient.js"></script>
+		<script src="collections/TagsServer.js"></script>
 
 		<!--Views-->
-		<script src="views/moviesClient.js"></script>
-		<script src="views/moviesServer.js"></script>
-
+		<script src="views/TagsClient.js"></script>
+		<script src="views/TagsServer.js"></script>
 		<script src="views/clientPagination.js"></script>
 		<script src="views/serverPagination.js"></script>
 

utils/backbone.paginator.server.js

@@ -9,6 +9,7 @@
 		// The paginator is responsible for providing pagination
 		// and sort capabilities for requests to a server-side
 		// data service.
+
 		mixins.serverPaginator = {
 
 
@@ -56,6 +57,7 @@
 			// update the totalPages value). If you would prefer
 
 			// Parameters to pass back to the server
+
 			mixins.serverPaginator.queryParams = {
 
 				// current page to query from the service

views/moviesClient.js → views/TagsClient.js

@@ -17,7 +17,7 @@
 			});
 
 			self.collection.bind('reset', self.addAll);
-			
+
 		},
 		addAll : function () {
 			$(this.el).empty();

views/moviesServer.js → views/TagsServer.js

@@ -1,3 +1,4 @@
+
 (function ( views ) {
 	views.TagsServer = Backbone.View.extend({
 		el : '#content2',
@@ -8,17 +9,12 @@
 
 			var self = this;
 			var tags = self.collection;
-
-			tags.fetch({
-				success: function(){
-					//self.collection.pager();
-				},
-				silent:true
-			});
+			tags.fetch();
 
 			self.collection.bind('reset', self.addAll);
-			
+
 		},
+
 		addAll : function () {
 			$(this.el).empty();
 			this.collection.each (this.addOne);
@@ -34,7 +30,6 @@
 	var TagServer = Backbone.View.extend({
 		tagName : 'li',
 		render : function () {
-			console.log('renderr');
 			$(this.el).html(this.model.get('Name'));
 		}
 	});

views/clientPagination.js

@@ -1,4 +1,5 @@
 (function ( views ) {
+
 	views.clientPagination = Backbone.View.extend({
 
 		events : {
@@ -13,7 +14,6 @@
 		},
 
 		tagName : 'aside',
-
 
 		initialize : function () {
 			this.collection.bind('reset', this.render, this);

views/serverPagination.js

@@ -14,17 +14,24 @@
 
 			this.collection.bind('reset', this.render, this);
 			this.collection.bind('change', this.render, this);
+
 			this.tmpl = _.template($('#tmpServerPagination').html());
 			$(this.el).appendTo('#pagination2');
 
 		},
+
+
 		render : function () {
 			//var html = this.tmpl(this.collection.info());
+			console.log('render pagig');
+
+			var totals = {
+				queryPage: 		 this.collection.queryParams.page,
+				queryTotalPages: this.collection.queryParams.totalPages
+			};
+
 
-			console.log('render');
-			//This needs to be done more cleanly.
-			var html = this.tmpl({queryPage: this.collection.queryParams.page, queryTotalPages:this.collection.queryParams.totalPages});
-			//var html = this.tmpl(this.collection.toJSON());
+			var html = this.tmpl(totals);
 			$(this.el).html(html);
 		},