Skip to content

Instantly share code, notes, and snippets.

@atinux

atinux/app.js

Created December 27, 2011 00:33
Show Gist options
  • Save atinux/1522344 to your computer and use it in GitHub Desktop.
Save atinux/1522344 to your computer and use it in GitHub Desktop.
Download ZIP
Backbone JS infinite data with Node JS and Express JS
Raw
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();
Raw
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>
Raw
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');
@atinux
Copy link
Author

atinux commented Dec 27, 2011

To use this Gist :

git clone git://gist.github.com/1522344.git gist-1522344
cd gist-1522344
mkdir public/ public/src/
mv index.html public/
mv app.js public/src/
npm install express
node server.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment