stanmx/gist:9194916

## 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>