Nuevos ejemplos para el taller de introduccion

eruizdechavez · Feb 5, 2012 · 15a5506 · 15a5506
1 parent 4835fd4
commit 15a5506
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 0 deletions.
diff --git a/introduction/event.html b/introduction/event.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+	<div>
+		<button class="sayHi">Say Hi!</button>
+		<button class="sayBye">Say Bye!</button>
+	</div>
+	<div class="console"></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="event.js"></script>
+</body>
+</html>
diff --git a/introduction/event.js b/introduction/event.js
@@ -0,0 +1,23 @@
+// Example of event dispatching and handling.
+$(function(){
+
+	// jQuery
+	$(window).on("erickrdch.sayHi", function(event, target, message){
+		target.html("Howdy " + message + "!");
+	});
+
+	$(".sayHi").click(function(event){
+		$(this).trigger("erickrdch.sayHi", [$(".console"), "Erick"]);
+	});
+
+
+	// Backbone
+	var controller = _.extend({}, Backbone.Events);
+	controller.on("erickrdch.sayBye", function(target, message){
+		target.html("Come back soon " + message + "!");
+	});
+
+	$(".sayBye").click(function(event){
+		controller.trigger("erickrdch.sayBye", $(".console"), "Erick");
+	});
+});
diff --git a/introduction/model.html b/introduction/model.html
@@ -0,0 +1,57 @@
+<!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="update">Update!</button>
+				</td>
+			</tr>
+		</table>
+	</div>
+	<div>
+		<table>
+			<tr>
+				<td>Name:</td>
+				<td><span class="name"></span></td>
+			</tr>
+			<tr>
+				<td>Age:</td>
+				<td><span class="age"></span></td>
+			</tr>
+			<tr>
+				<td>Employed:</td>
+				<td><span class="employed"></span></td>
+			</tr>
+		</table>
+	</div>
+	<div class="console"></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="model.js"></script>
+</body>
+</html>
diff --git a/introduction/model.js b/introduction/model.js
@@ -0,0 +1,30 @@
+// 
+$(function() {
+	var User = Backbone.Model.extend({
+		defaults: function() {
+			return {
+				name: "John Doe",
+				age: 18 + parseInt(Math.random() * 20),
+				employed: "No"
+			};
+		}
+	});
+
+	var user = new User();
+
+	function updateUser() {
+		$("span.name").html(user.attributes.name);
+		$("span.age").html(user.attributes.age);
+		$("span.employed").html(user.attributes.employed);
+	};
+
+	$(".update").click(function(event) {
+		user.attributes.name = $("input[name='name']").val();
+		user.attributes.age = parseInt($("input[name='age']").val());
+		user.attributes.employed = $("input[name='employed']").is(":checked") ? "Yes" : "No";
+
+		updateUser();
+	});
+
+	updateUser();
+});
diff --git a/introduction/model_complete.js b/introduction/model_complete.js
@@ -0,0 +1,46 @@
+// 
+$(function() {
+	var User = 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 user = new User();
+
+	user.on("change", updateUser);
+
+	user.on("error", function(model, error){
+		console.log("Oops :'( " + error)
+	});
+
+	function updateUser() {
+		$("span.name").html(user.get("name"));
+		$("span.age").html(user.get("age"));
+		$("span.employed").html(user.get("employed"));
+	};
+
+	$(".update").click(function(event) {
+		user.set({
+			name: $("input[name='name']").val(),
+			age: parseInt($("input[name='age']").val()),
+			employed: $("input[name='employed']").is(":checked") ? "Yes" : "No"
+		});
+	});
+
+	updateUser();
+});