tristanwietsma/app.js

## app.js
/*
** Client side - /public/src/app.js
*/

var myApp = {
// Collections
	Collections: {
		list: Backbone.Collection.extend()
	},
// Views
	Views: {
		list: Backbone.View.extend({
			el: $('#content'),
			events: {
				'click .more': 'more'
			},
			initialize: function () {
				this.refresh();
			},
			refresh: function () {
				var that = this;
				this.el.html('');
				this.collection.each(function (model) {
					that.el.append(model.attributes.name + '<br/>');
				});
				this.el.append('<button type="button" class="more">More</button>');
			},
			more: function () {
				this.$('.more').html('loading...').attr('disabled', 'disabled');
				myApp.routers.list.index();
			}
		})
	},
// Routers
	Routers: {
		list: Backbone.Router.extend({
			routes: {
				'': 'index'
			},
			index: function () {
				// if collection doesn't exist, create it
				if(!myApp.collections.list){
					myApp.collections.list = new myApp.Collections.list;
					myApp.collections.list.page = 1;
				}
				else {
					// increment the page
					myApp.collections.list.page++;
				}

				myApp.collections.list.url = '/names/' + myApp.collections.list.page;

				myApp.collections.list.fetch({
						add: true,
						success: function() {
								if (!myApp.views.list) {
									myApp.views.list = new myApp.Views.list({ collection: myApp.collections.list });
								}
								else {
									myApp.views.list.refresh();
								}
						},
						error: function() {
								new Error({ message: "Error loading documents." });
						}
				});
			}
		})
	},
// Instances
	collections: {},
	views: {},
	routers: {},
// Initialize
	init: function () {
		// init the router (call directly index if there is no route)
		this.routers.list = new myApp.Routers.list();
		Backbone.history.start();
	}
};

myApp.init();

## index.html
<!--
--- Client side - /public/index.html
-->
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Comptatible" content="IE=edge,chrome=1">
	<title>Example of infinite data with Backbone JS</title>
</head>
<body>
	<div id="content"></div>

	<!-- Thirt-Party Libraries (Order matters) -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

	<!-- Application core (Order matters) -->
	<script type="text/javascript" src="src/app.js"></script>

</body>
</html>

## server.js
/*
** Server side - /server.js
** Start it with node server.js and go to http://localhost:4000/
**/

var express = require('express'),
		app = express.createServer();

app.configure(function() {
	app.use(express.static(__dirname +'/public/'));
});

app.get('/names/:page', function (req, res) {
	var page = req.params.page;
	res.json([
		{ name: 'Name '+ (5 * (page - 1) + 1) },
		{ name: 'Name '+ (5 * (page - 1) + 2) },
		{ name: 'Name '+ (5 * (page - 1) + 3) },
		{ name: 'Name '+ (5 * (page - 1) + 4) },
		{ name: 'Name '+ (5 * (page - 1) + 5) }
	]);
});

app.listen(4000);
console.log('Serveur on http://localhost:4000');
	/*
	** Client side - /public/src/app.js
	*/

	var myApp = {
	// Collections
	Collections: {
	list: Backbone.Collection.extend()
	},
	// Views
	Views: {
	list: Backbone.View.extend({
	el: $('#content'),
	events: {
	'click .more': 'more'
	},
	initialize: function () {
	this.refresh();
	},
	refresh: function () {
	var that = this;
	this.el.html('');
	this.collection.each(function (model) {
	that.el.append(model.attributes.name + '<br/>');
	});
	this.el.append('<button type="button" class="more">More</button>');
	},
	more: function () {
	this.$('.more').html('loading...').attr('disabled', 'disabled');
	myApp.routers.list.index();
	}
	})
	},
	// Routers
	Routers: {
	list: Backbone.Router.extend({
	routes: {
	'': 'index'
	},
	index: function () {
	// if collection doesn't exist, create it
	if(!myApp.collections.list){
	myApp.collections.list = new myApp.Collections.list;
	myApp.collections.list.page = 1;
	}
	else {
	// increment the page
	myApp.collections.list.page++;
	}

	myApp.collections.list.url = '/names/' + myApp.collections.list.page;

	myApp.collections.list.fetch({
	add: true,
	success: function() {
	if (!myApp.views.list) {
	myApp.views.list = new myApp.Views.list({ collection: myApp.collections.list });
	}
	else {
	myApp.views.list.refresh();
	}
	},
	error: function() {
	new Error({ message: "Error loading documents." });
	}
	});
	}
	})
	},
	// Instances
	collections: {},
	views: {},
	routers: {},
	// Initialize
	init: function () {
	// init the router (call directly index if there is no route)
	this.routers.list = new myApp.Routers.list();
	Backbone.history.start();
	}
	};

	myApp.init();
	<!--
	--- Client side - /public/index.html
	-->
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Comptatible" content="IE=edge,chrome=1">
	<title>Example of infinite data with Backbone JS</title>
	</head>
	<body>
	<div id="content"></div>

	<!-- Thirt-Party Libraries (Order matters) -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

	<!-- Application core (Order matters) -->
	<script type="text/javascript" src="src/app.js"></script>

	</body>
	</html>
	/*
	** Server side - /server.js
	** Start it with node server.js and go to http://localhost:4000/
	**/

	var express = require('express'),
	app = express.createServer();

	app.configure(function() {
	app.use(express.static(__dirname +'/public/'));
	});

	app.get('/names/:page', function (req, res) {
	var page = req.params.page;
	res.json([
	{ name: 'Name '+ (5 * (page - 1) + 1) },
	{ name: 'Name '+ (5 * (page - 1) + 2) },
	{ name: 'Name '+ (5 * (page - 1) + 3) },
	{ name: 'Name '+ (5 * (page - 1) + 4) },
	{ name: 'Name '+ (5 * (page - 1) + 5) }
	]);
	});

	app.listen(4000);
	console.log('Serveur on http://localhost:4000');