-
Notifications
You must be signed in to change notification settings - Fork 1
/
index08addEvents.html
75 lines (69 loc) · 2.49 KB
/
index08addEvents.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" media="all">
<script src='vendor/jquery.js'></script>
<script src='vendor/underscore.js'></script>
<script src='vendor/backbone.js'></script>
<script>
var games = [
{ name: 'Super Mario World', minutes: 290 },
{ name: 'Donkey Kong Country', minutes: 140 },
{ name: 'Mega Man X', minutes: 60 }
];
var GameTracker = { Models: {}, Collections: {}, Views: {} };
// MODELS
GameTracker.Models.Game = Backbone.Model.extend({
formattedMinutes: function () {
var minutes = this.get('minutes');
return parseInt(minutes / 60, 10) + ' hours ' + minutes % 60 + ' minutes';
}
});
// COLLECTIONS
GameTracker.Collections.GameCollection = Backbone.Collection.extend({
model: GameTracker.Models.Game
});
// VIEWS
GameTracker.Views.GameTableRow = Backbone.View.extend({
tagName: 'tr',
template: _.template("<td><%= get('name') %></td><td><%= formattedMinutes() %></td>"),
render: function () {
this.$el.html(this.template(this.model));
return this;
}
});
GameTracker.Views.GameTable = Backbone.View.extend({
tagName: 'table',
template: _.template("<thead><tr><th data-sort='name'>Name</th><th data-sort='minutes'>Minutes Played</th></tr></thead><tbody></tbody>"),
events: {
'click th': 'sort'
},
render: function () {
this.$el.html(this.template());
this.collection.each(function (game) {
var gameView = new GameTracker.Views.GameTableRow({ model: game });
this.$('tbody').append(gameView.render().el);
}, this);
return this;
},
sort: function (event) {
var sortColumn = $(event.currentTarget).data('sort');
this.collection.comparator = function (game) { return game.get(sortColumn) };
this.collection.sort();
this.render();
}
});
// START APP
$(document).ready(function () {
var gameCollection = new GameTracker.Collections.GameCollection();
gameCollection.add(games);
var gameTable = new GameTracker.Views.GameTable({ collection: gameCollection });
$('.content').html(gameTable.render().el);
});
</script>
</head>
<body>
<div class='header'>Game Tracker</div>
<div class='content'></div>
</body>
</html>