andreisebastianc · September 15, 2015 09:35
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html>
 <head>
 	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
 	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
 	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
 	<title>BB::APP</title>
 </head>
 <body>
 	<h1>Welcome to your profile</h1>
 	<div id="page"></div>

 	<script type="text/template" id="template-FriendsListView">
 		<ul class="friends list view">
 		</ul>
 	</script>

 	<script type="text/template" id="template-FriendInListView">
 		<li class="friend in-list view">
 			<img src="<%= imgURL %>"/>
 			<button type="button" class="remove-btn">REMOVE</button>
 		</li>
 	</script>

 	<script type="text/template" id="template-UserProfileView">
 		<div class="user profile view">
 			<img src="<%= imgURL %>"/>
 			<div>
 				<span class="highlight name"><%= name %></span>
 				<p class="description"><%= description %></p>
 			</div>
 		</div>
 	</script>

 	<button type="text/button" id="add-mock-user">Add new</button>

 	<script type="text/javascript">
 		var mockUsers = [
 				{
 					name: "Sergiu Suciu",
 					age: 21,
 					description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 				},
 				{
 					name: "Andrei Cimpean",
 					age: 27,
 					description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 				},
 				{
 					name: "Andrei Hosu",
 					age: 23,
 					description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 				}
 		];

 		var UserModel = Backbone.Model.extend({
 			defaults: {
 				imgURL: "http://lorempixel.com/120/120/people"
 			},
 			remove: function () {
 				this.trigger('destroy', this);
 			}
 		});

 		var UserCollection = Backbone.Collection.extend({
 		  model: UserModel,
 			addMockUser: function () {
 				this.add({
 					name: "RANDOM",
 					age: Math.random() * 100,
 					description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 				});
 			}
 		});

 		var BaseView = Backbone.View.extend({
 			renderTemplate: function (selectorString, options) {
 				var templateText = document.querySelector(selectorString).innerText;
 				var compiled = _.template(templateText);

 				if (options != null) {
 					return compiled(options);
 				}

 				return compiled();
 			}
 		});

 		var HomepageView = BaseView.extend({
 			initialize: function () {
 				this.userProfile = new UserProfileView({
 					model: preEmployment.at(0)
 				});

 				this.friendsList = new FriendsListView({
 					collection: preEmployment
 				});
 			},
 			render: function () {
 					this.userProfile.render();
 					this.$el.append(this.userProfile.el);

 					this.friendsList.render();
 					this.$el.append(this.friendsList.el);
 			}
 		});

 		var FriendsListView = BaseView.extend({
 			initialize: function () {
 				this.listenTo(this.collection, 'all', this.render);
 			},
 			template: function () {
 				return this.renderTemplate('#template-FriendsListView');
 			},
 			render: function () {
 				var that = this;

 				this.$el.html(this.template());

 				this.collection.models.forEach( function (model) {
 					var view = new FriendInListView({model: model});
 					view.render();
 					that.$el.append(view.el);
 				});
 			}
 		});

 		var FriendInListView = BaseView.extend({
 			events: {
 				"click .remove-btn": "handleRemoveClick"
 			},
 			handleRemoveClick: function () {
 				this.model.remove();
 			},
 			template: function (values) {
 				return this.renderTemplate('#template-FriendInListView', values);
 			},
 			render: function () {
 				this.$el.html(this.template(this.model.attributes));
 			}
 		});

 		var UserProfileView = BaseView.extend({
 			template: function (values) {
 				return this.renderTemplate('#template-UserProfileView', values);
 			},
 			render: function () {
 				this.$el.html(this.template(this.model.attributes));
 			}
 		});

 		var preEmployment = new UserCollection(mockUsers);

 		var homepageView = new HomepageView({
 			el: $('#page')[0]
 		});
 		homepageView.render();

 		$('#add-mock-user').on('click', function () {
 			preEmployment.addMockUser();
 		});
 	</script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
	<title>BB::APP</title>
	</head>
	<body>
	<h1>Welcome to your profile</h1>
	<div id="page"></div>

	<script type="text/template" id="template-FriendsListView">
	<ul class="friends list view">
	</ul>
	</script>

	<script type="text/template" id="template-FriendInListView">
	<li class="friend in-list view">
	<img src="<%= imgURL %>"/>
	<button type="button" class="remove-btn">REMOVE</button>
	</li>
	</script>

	<script type="text/template" id="template-UserProfileView">
	<div class="user profile view">
	<img src="<%= imgURL %>"/>
	<div>
	<span class="highlight name"><%= name %></span>
	<p class="description"><%= description %></p>
	</div>
	</div>
	</script>

	<button type="text/button" id="add-mock-user">Add new</button>

	<script type="text/javascript">
	var mockUsers = [
	{
	name: "Sergiu Suciu",
	age: 21,
	description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	},
	{
	name: "Andrei Cimpean",
	age: 27,
	description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	},
	{
	name: "Andrei Hosu",
	age: 23,
	description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	}
	];

	var UserModel = Backbone.Model.extend({
	defaults: {
	imgURL: "http://lorempixel.com/120/120/people"
	},
	remove: function () {
	this.trigger('destroy', this);
	}
	});

	var UserCollection = Backbone.Collection.extend({
	model: UserModel,
	addMockUser: function () {
	this.add({
	name: "RANDOM",
	age: Math.random() * 100,
	description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	});
	}
	});

	var BaseView = Backbone.View.extend({
	renderTemplate: function (selectorString, options) {
	var templateText = document.querySelector(selectorString).innerText;
	var compiled = _.template(templateText);

	if (options != null) {
	return compiled(options);
	}

	return compiled();
	}
	});

	var HomepageView = BaseView.extend({
	initialize: function () {
	this.userProfile = new UserProfileView({
	model: preEmployment.at(0)
	});

	this.friendsList = new FriendsListView({
	collection: preEmployment
	});
	},
	render: function () {
	this.userProfile.render();
	this.$el.append(this.userProfile.el);

	this.friendsList.render();
	this.$el.append(this.friendsList.el);
	}
	});

	var FriendsListView = BaseView.extend({
	initialize: function () {
	this.listenTo(this.collection, 'all', this.render);
	},
	template: function () {
	return this.renderTemplate('#template-FriendsListView');
	},
	render: function () {
	var that = this;

	this.$el.html(this.template());

	this.collection.models.forEach( function (model) {
	var view = new FriendInListView({model: model});
	view.render();
	that.$el.append(view.el);
	});
	}
	});

	var FriendInListView = BaseView.extend({
	events: {
	"click .remove-btn": "handleRemoveClick"
	},
	handleRemoveClick: function () {
	this.model.remove();
	},
	template: function (values) {
	return this.renderTemplate('#template-FriendInListView', values);
	},
	render: function () {
	this.$el.html(this.template(this.model.attributes));
	}
	});

	var UserProfileView = BaseView.extend({
	template: function (values) {
	return this.renderTemplate('#template-UserProfileView', values);
	},
	render: function () {
	this.$el.html(this.template(this.model.attributes));
	}
	});

	var preEmployment = new UserCollection(mockUsers);

	var homepageView = new HomepageView({
	el: $('#page')[0]
	});
	homepageView.render();

	$('#add-mock-user').on('click', function () {
	preEmployment.addMockUser();
	});
	</script>
	</body>
	</html>