Backbone test

by nhuon

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Backbone</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/underscore.js"></script>
	<script src="js/backbone.js"></script>
	<script src="js/backbone.localStorage.js"></script>
	<script src="js/sinon-server-1.7.3.js"></script>
	<script src="js/app.js"></script>
</head>
<body>

	<script type="text/template" id="league_list_template">
		<% _.each(leagues, function(league, i) { %>
		<li class="league_list_item"><a href="#leagues/<%= i %>"><%= league.get('name') %></a></li>
		<% }); %>
	</script>

	<script type="text/template" id="league_container_template">
		<h1><%= league.get('name') %></h1>
		<label>Select day</label>
		<select id="select-day">
			<% _.each(_.range((league.get('nb_teams') - 1) * 2), function(i) { %>
			<option value="<%= i + 1 %>"><%= i + 1 %></option>
			<% }); %>
		</select>
	</script>

	<div id="main">
		<div id="left"></div>
		<div id="right">
		</div>
	</div>

</body>
</html>

JavaScript

$(function() {

	///////////////////////////////////////////////////////////////////////////
	// DEBUG
	var id = 0;
	var server = sinon.fakeServer.create();
	server.autoRespond = true;
	server.autoRespondAfter = 100;
	var header = { "Content-Type": "application/json" };
	server.respondWith('GET', '/leagues', function(xhr) {
		xhr.respond(200, header, JSON.stringify(leagues_server_data));
	});
	server.respondWith('GET', /\/scores\/(\d+)/, function(xhr) {
		xhr.respond(200, header, JSON.stringify(scores_server_data));
	});
	server.respondWith('POST', '/league', function(xhr) {
		var league = $.parseJSON(xhr.requestBody);
		league.id = id++;
		leagues_server_data.push(league);
		xhr.respond(200, header, JSON.stringify(league));
	});
	///////////////////////////////////////////////////////////////////////////

	var League = Backbone.Model.extend({
		
		url: '/league',

		defaults: {
			name: 'League name',
			nb_teams: 0
		},

	});

	var LeagueCollection = Backbone.Collection.extend({

		model: League,
		url: '/leagues'
	});

	var Score = Backbone.Model.extend({

		url: '/score',

		defaults: {
			day: 0,
			team1: 0,
			team2: 0,
			score1: 0,
			score2: 0,
		}
	});

	var ScoreCollection = Backbone.Collection.extend({

		model: Score,
	});

	var MenuView = Backbone.View.extend({

		tagName: 'ul',
		className: 'menu_list',
		template: $("#league_list_template").html(),

		render: function() {
			this.$el.html(_.template(this.template, { leagues: this.collection.models }));
			return this;
		}

	});

	var LeagueView = Backbone.View.extend({

		className: 'league_container',
		template: $("#league_container_template").html(),

		initialize: function() {
			this.addScoreMode = false;
			this.current_day = 1;
			this.scores = new ScoreCollection();
			this.scores.url = '/scores/' + this.model.id;
			this.listenTo(this.scores, 'reset', this.resetScores);
			this.scores.fetch({reset: true});
		},

		events: {
			'click #addscore-open': 'enterAddScoreMode',
			'click...