Agregando ejemplo de vista

eruizdechavez · Feb 9, 2012 · e526528 · e526528
1 parent d644920
commit e526528
Show file tree

Hide file tree

Showing 4 changed files with 235 additions and 1 deletion.
diff --git a/introduction/collection.html b/introduction/collection.html
@@ -46,7 +46,7 @@
 	</div>
 	<div class="templates" style="visibility:hidden;">
 		<table>
-			<tbody data-template-name="users-row">
+			<tbody data-template-name="user-row">
 				<tr data-user-id="{{id}}">
 					<td>{{name}}</td>
 					<td>{{age}}</td>

diff --git a/introduction/view.html b/introduction/view.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+	<div>
+		<table>
+			<tr>
+				<td>Name:</td>
+				<td>
+					<input name="name" type="text" />
+				</td>
+			</tr>
+			<tr>
+				<td>Age:</td>
+				<td>
+					<input name="age" type="text" />
+				</td>
+			</tr>
+			<tr>
+				<td>Employed:</td>
+				<td>
+					<input name="employed" type="checkbox" />
+				</td>
+			</tr>
+			<tr>
+				<td colspan="2">
+					<button class="add">Add</button>
+				</td>
+			</tr>
+		</table>
+	</div>
+	<div>
+		<table class="users-table">
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Age</th>
+					<th>Employed</th>
+					<th>Action</th>
+				</tr>
+			</thead>
+			<tbody></tbody>
+		</table>
+	</div>
+	<div class="templates" style="visibility:hidden;">
+		<table>
+			<tbody data-template-name="user-row">
+				<tr data-user-id="{{id}}">
+					<td>{{name}}</td>
+					<td>{{age}}</td>
+					<td>{{employed}}</td>
+					<td><button class="delete">Delete</button></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+	<!-- Scripts -->
+	<script type="text/javascript" src="../twitter-search/jquery-1.7.1.js"></script>
+	<script type="text/javascript" src="../twitter-search/underscore.js"></script>
+	<script type="text/javascript" src="../twitter-search/backbone.js"></script>
+	<script type="text/javascript" src="../twitter-search/mustache.js"></script>
+	<script type="text/javascript" src="view.js"></script>
+</body>
+</html>
diff --git a/introduction/view.js b/introduction/view.js
@@ -0,0 +1,68 @@
+// 
+$(function() {
+
+	var UserModel = Backbone.Model.extend({
+		defaults: function() {
+			return {
+				name: "John Doe",
+				age: 18 + parseInt(Math.random() * 20),
+				employed: "No"
+			};
+		},
+
+		validate: function(attributes) {
+			if (!_.isNumber(attributes.age) || _.isNaN(attributes.age)) {
+				return "Age is not a number";
+			}
+
+			if (attributes.age < 18) {
+				return "Sorry, just 18 and older";
+			}
+		}
+	});
+
+	var UserCollection = Backbone.Collection.extend({
+		model: UserModel
+	});
+
+	var users = new UserCollection();
+
+	users.on("add remove", updateTable);
+
+	$(".add").click(function(event) {
+		var d = new Date();
+		addUser({
+			id: d.getTime(),
+			name: $("input[name='name']").val(),
+			age: parseInt($("input[name='age']").val()),
+			employed: $("input[name='employed']").is(":checked") ? "Yes" : "No"
+		});
+	});
+
+	$("body").on("click", ".delete", function(event) {
+		removeUser($(event.currentTarget).parent().parent().data("user-id"));
+	});
+
+	function addUser(data) {
+		try {
+			users.add(data);
+		} catch (error) {
+			console.log(error.message);
+		}
+	};
+
+	function removeUser(userId) {
+		users.remove(users.get(userId));
+	};
+
+	function updateTable() {
+		var $tbody = $(".users-table tbody");
+		var template = $.trim($("[data-template-name='user-row']").html() || "Row template not found!");
+
+		$tbody.empty();
+
+		users.each(function(user) {
+			$tbody.append(Mustache.render(template, user.toJSON()));
+		}, this);
+	};
+});
diff --git a/introduction/view_complete.js b/introduction/view_complete.js
@@ -0,0 +1,100 @@
+// 
+$(function() {
+
+	var UserModel = Backbone.Model.extend({
+		defaults: function() {
+			return {
+				name: "John Doe",
+				age: 18 + parseInt(Math.random() * 20),
+				employed: "No"
+			};
+		},
+
+		validate: function(attributes) {
+			if (!_.isNumber(attributes.age) || _.isNaN(attributes.age)) {
+				return "Age is not a number";
+			}
+
+			if (attributes.age < 18) {
+				return "Sorry, just 18 and older";
+			}
+		}
+	});
+
+	var UserCollection = Backbone.Collection.extend({
+		model: UserModel
+	});
+
+	var UsersView = Backbone.View.extend({
+		el: "body",
+
+		events: {
+			"click .add": "addUser"
+		},
+
+		initialize: function() {
+			_.bindAll(this);
+
+			this.model = new UserCollection();
+			this.model.on("add", this.userAdded);
+			this.model.on("remove", this.userRemoved);
+		},
+
+		addUser: function(event) {
+			var d = new Date();
+			try {
+				this.model.add({
+					id: d.getTime(),
+					name: $("input[name='name']").val(),
+					age: parseInt($("input[name='age']").val()),
+					employed: $("input[name='employed']").is(":checked") ? "Yes" : "No"
+				});
+			} catch (error) {
+				console.log(error.message);
+			}
+		},
+
+		userAdded: function(user) {
+			if (user.view == null) {
+				user.view = new UserView({
+					model: user,
+					template: $.trim($("[data-template-name='user-row'] tr").html() || "Row template not found!")
+				});
+			}
+			this.$el.find(".users-table tbody").append(user.view.render().el);
+		},
+
+		userRemoved: function(user) {
+			if (user.view != null) {
+				user.view.remove();
+			}
+			user.clear();
+		}
+	});
+
+	var UserView = Backbone.View.extend({
+		tagName: "tr",
+		template: null,
+
+		events: {
+			"click .delete": "removeView"
+		},
+
+		initialize: function() {
+			_.bindAll(this);
+
+			this.template = this.options.template;
+		},
+
+		render: function() {
+			this.$el.html(Mustache.render(this.template, this.model.toJSON()));
+			return this;
+		},
+
+		removeView: function() {
+			this.model.collection.remove(this.model);
+		}
+	});
+
+	var view = new UsersView();
+});