stanmx · February 24, 2014 19:15
diff --git a/gistfile1.js b/gistfile1.js
 <html>
 <head>
 	<title>Backbone JS</title>
 	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js" type="text/javascript"></script>
 	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js" type="text/javascript"></script>
 	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone.js" type="text/javascript"></script>
 	<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.js" type="text/javascript"></script>

 	<script type="text/javascript">

 		$(function(){

 			var Movie = Backbone.Model.extend({
 				defaults: function(){
 					return {
 						id: null,
 						title: "Back to the Future",
 						actor: "Michael J. Fox",
 						year: 1985
 					};
 				},

 				// no funciona
 				validate: function(attributes){
 					// no guarda lo que se escribe, pero deja un espacio en blanco.
 					if (!_.isNumber(attributes.year) || _.isNaN(attributes.year)) {
 						return "Year is not a number";
 					}	 
 				}
 			});

 			var MovieCollection = Backbone.Collection.extend({
 				model: Movie
 			});

 			var movies = new MovieCollection();

 			movies.on("add", movieAdded);

 			movies.on('invalid', function(model, error){
    			console.log(error);
 			});

 			function movieAdded(){
 				var template = $("[data-template-name='movie-row']").html().trim();
 				//alert(template);
 				
 				$tbody = $(".movies-table > tbody");
 				$tbody.empty();
 				
 				movies.each(function(movie){
 					$tbody.append(Mustache.render(template, movie.toJSON()));
 				});
 			};

 			$(".add").click(function(event) {
 				var movie = new Movie({
 					title: $("input[name='title']").val(),
 					actor: $("input[name='actor']").val(),
 					year: parseInt($("input[name='year']").val())
 				},{validate: true});

 				movies.add(movie);
 				//alert(movies.size());
 				//console.log(movie);
 			});
      // aun no tiene acciones para borrar
 			//$(".delete")...

 		});

 	</script>

 </head>
 <body>

 	<div>
 		<label>Title:</label>
 		<input type="text" name="title">
 		<label>Actor:</label>
 		<input type="text" name="actor">
 		<label>Year:</label>
 		<input type="text" name="year">
 		<button class="add">add</button>
 	</div>
 	
 	<div>
 		<table class="movies-table"> 
 			<thead>
 				<tr>
 					<th>Title</th>
 					<th>Actor</th>
 					<th>Year</th>
 					<th>Action</th>
 				</tr>
 			</thead>
 			<tbody></tbody>
 		</table>
 	</div>
 	<div class="templates" style="visibility:hidden">
 		<table>
 			<tbody data-template-name="movie-row">
 				<tr data-movie-id="{{id}}">
 					<td>{{title}}</td>
 					<td>{{actor}}</td>
 					<td>{{year}}</td>
 					<td><button class="delete">Delete</button></td>
 				</tr>
 			</tbody>
 		</table>
 	</div>

 </body>
 </html>
	<html>
	<head>
	<title>Backbone JS</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.js" type="text/javascript"></script>

	<script type="text/javascript">

	$(function(){

	var Movie = Backbone.Model.extend({
	defaults: function(){
	return {
	id: null,
	title: "Back to the Future",
	actor: "Michael J. Fox",
	year: 1985
	};
	},

	// no funciona
	validate: function(attributes){
	// no guarda lo que se escribe, pero deja un espacio en blanco.
	if (!_.isNumber(attributes.year) \|\| _.isNaN(attributes.year)) {
	return "Year is not a number";
	}
	}
	});

	var MovieCollection = Backbone.Collection.extend({
	model: Movie
	});

	var movies = new MovieCollection();

	movies.on("add", movieAdded);

	movies.on('invalid', function(model, error){
	console.log(error);
	});

	function movieAdded(){
	var template = $("[data-template-name='movie-row']").html().trim();
	//alert(template);

	$tbody = $(".movies-table > tbody");
	$tbody.empty();

	movies.each(function(movie){
	$tbody.append(Mustache.render(template, movie.toJSON()));
	});
	};

	$(".add").click(function(event) {
	var movie = new Movie({
	title: $("input[name='title']").val(),
	actor: $("input[name='actor']").val(),
	year: parseInt($("input[name='year']").val())
	},{validate: true});

	movies.add(movie);
	//alert(movies.size());
	//console.log(movie);
	});
	// aun no tiene acciones para borrar
	//$(".delete")...

	});

	</script>

	</head>
	<body>

	<div>
	<label>Title:</label>
	<input type="text" name="title">
	<label>Actor:</label>
	<input type="text" name="actor">
	<label>Year:</label>
	<input type="text" name="year">
	<button class="add">add</button>
	</div>

	<div>
	<table class="movies-table">
	<thead>
	<tr>
	<th>Title</th>
	<th>Actor</th>
	<th>Year</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	<div class="templates" style="visibility:hidden">
	<table>
	<tbody data-template-name="movie-row">
	<tr data-movie-id="{{id}}">
	<td>{{title}}</td>
	<td>{{actor}}</td>
	<td>{{year}}</td>
	<td><button class="delete">Delete</button></td>
	</tr>
	</tbody>
	</table>
	</div>

	</body>
	</html>