jordoh/Index.html

## app.js
var App = {
    Views: {},
    Controllers: {},
    Models: {},
    init: function () {
        var controller = new App.Controllers.Paragraphs();
        Backbone.history.start();
    }
};

App.Models.Paragraph = Backbone.Model.extend({
    defaults: {
        EnglishText: ''
    }
});

App.Models.Paragraphs = Backbone.Collection.extend({
    model: App.Models.Paragraph,
    url: "/paragraphs",
    page: 0,

    fetch: function(options) {
        options || (options = {});
        options.data = { page: this.page };
        Backbone.Collection.prototype.fetch.call(this, options);
    },

    nextPage: function() {
        this.page = this.page + 1;
        this.fetch();
    },

    previousPage: function() {
        this.page = this.page - 1;
        this.fetch();
    }
});

App.Views.Index = Backbone.View.extend({
    el: 'ul.paragraphs',

    events: {
        'click a.prev': 'previous',
        'click a.next': 'next'
    },

    initialize: function () {
        // remember: every function that uses 'this' as the current object should be in here
        _.bindAll(this, 'render', 'previous', 'next');

        //this.collection = this.options.collection;
        this.collection.bind('all', this.render, this);
    },

    render: function () {
        $(this.el).empty();

        var self = this;
        this.collection.each(function (paragraph) {
            var template = _.template($("#paragraph_template").html(), {
                englishText: paragraph.get('EnglishText'),
                foreignText: paragraph.get('ForeignText')
            });
            $(self.el).append(template);
        });

        return this;
    },

    previous: function () {
        this.collection.previousPage();
        return false;
    },

    next: function () {
        this.collection.nextPage();
        return false;
    }
});

App.Controllers.Paragraphs = Backbone.Router.extend({
    paragraphs: new App.Models.Paragraphs(),

    routes: {
        "": "index",
    },

    initialize: function() {
        this.view = new App.Views.Index({ collection: this.paragraphs });
    },

    index: function () {
        this.paragraphs.fetch();
    }
});

## Index.html
<!DOCTYPE HTML>
<html>
    <head>
        <title>Paragraphs</title>
        <link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/humanity/jquery-ui.css" rel="stylesheet" />
        <link type="text/css" href="/Stylesheets/Main.css" rel="stylesheet" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
        <script src="/Scripts/underscore.js" type="text/javascript"></script>
        <script src="/Scripts/backbone.js" type="text/javascript"></script>
        <script src="/Scripts/app.js" type="text/javascript"></script>
    </head>
    <body>
        <ul class="paragraphs"></ul>
        <script type="text/template" id="paragraph_template">
	        <li class="paragraph">
                <div class="englishText"><%= englishText %></div>
                <div class="foreignText"><%= foreignText %></div>
            </li>
        </script>

        <div>
            <a href="#" class="prev">Prev</a>
            <a href="#" class="next">Next</a>
        </div>

        <script type="text/javascript">
            $(App.init);
        </script>
    </body>
</html>
	var App = {
	Views: {},
	Controllers: {},
	Models: {},
	init: function () {
	var controller = new App.Controllers.Paragraphs();
	Backbone.history.start();
	}
	};

	App.Models.Paragraph = Backbone.Model.extend({
	defaults: {
	EnglishText: ''
	}
	});

	App.Models.Paragraphs = Backbone.Collection.extend({
	model: App.Models.Paragraph,
	url: "/paragraphs",
	page: 0,

	fetch: function(options) {
	options \|\| (options = {});
	options.data = { page: this.page };
	Backbone.Collection.prototype.fetch.call(this, options);
	},

	nextPage: function() {
	this.page = this.page + 1;
	this.fetch();
	},

	previousPage: function() {
	this.page = this.page - 1;
	this.fetch();
	}
	});

	App.Views.Index = Backbone.View.extend({
	el: 'ul.paragraphs',

	events: {
	'click a.prev': 'previous',
	'click a.next': 'next'
	},

	initialize: function () {
	// remember: every function that uses 'this' as the current object should be in here
	_.bindAll(this, 'render', 'previous', 'next');

	//this.collection = this.options.collection;
	this.collection.bind('all', this.render, this);
	},

	render: function () {
	$(this.el).empty();

	var self = this;
	this.collection.each(function (paragraph) {
	var template = _.template($("#paragraph_template").html(), {
	englishText: paragraph.get('EnglishText'),
	foreignText: paragraph.get('ForeignText')
	});
	$(self.el).append(template);
	});

	return this;
	},

	previous: function () {
	this.collection.previousPage();
	return false;
	},

	next: function () {
	this.collection.nextPage();
	return false;
	}
	});

	App.Controllers.Paragraphs = Backbone.Router.extend({
	paragraphs: new App.Models.Paragraphs(),

	routes: {
	"": "index",
	},

	initialize: function() {
	this.view = new App.Views.Index({ collection: this.paragraphs });
	},

	index: function () {
	this.paragraphs.fetch();
	}
	});
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Paragraphs</title>
	<link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/humanity/jquery-ui.css" rel="stylesheet" />
	<link type="text/css" href="/Stylesheets/Main.css" rel="stylesheet" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
	<script src="/Scripts/underscore.js" type="text/javascript"></script>
	<script src="/Scripts/backbone.js" type="text/javascript"></script>
	<script src="/Scripts/app.js" type="text/javascript"></script>
	</head>
	<body>
	<ul class="paragraphs"></ul>
	<script type="text/template" id="paragraph_template">
	<li class="paragraph">
	<div class="englishText"><%= englishText %></div>
	<div class="foreignText"><%= foreignText %></div>
	</li>
	</script>

	<div>
	<a href="#" class="prev">Prev</a>
	<a href="#" class="next">Next</a>
	</div>

	<script type="text/javascript">
	$(App.init);
	</script>
	</body>
	</html>