backbone.js todo app

by chridam

HTML

<section id="wrapper">
		<form class="new" action="#">
			<input id="new" placeholder="Add new todo">
		</form>
		<div id="todos"></div>
	</section>
		<script type="text/template" id="todo-template">
			<input type="checkbox" <% print(done? 'checked' : null) %>/>
			<input type="text" value="<%=text%>" />
			<a href="#" class="delete-link">&#10008;</a>
		</script>
		
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
		<script src="todo.js"></script>

JavaScript

var todos = [
		{text: "todo 1", done: true},
		{text: "todo 2", done: false},
		{text: "todo 3", done: false},
];

var Todo = Backbone.Model.extend({
	text: 'TODO',
	done: false
});

var List = Backbone.Collection.extend({
	model: Todo
});

var TodoView = Backbone.View.extend({
	defaults:{
		text: '', done: false
	},
	className: 'todo',
	tagName: 'article',
	events: {
		"click .delete-link": "delete",
		"keyup input[type='text']": "edit",
		"click input[type='checkbox']": "check"
	},
	render: function(){
		var templ = _.template($('#todo-template').html());
		this.$el.html(templ(this.model.toJSON()));
	},
	delete: function(e){
		e.preventDefault();
		var that = this;
		this.$el.fadeOut(function(){
			that.model.destroy();
			todo.render();
		});
	},
	edit: function(e){
		this.model.attributes.text = e.target.value;
	},
	check: function(e){
		this.model.attributes.done = e.target.checked;
	}
});

var TodosView = Backbone.View.extend({
	el: $('#wrapper'),
	events:{
		"submit form.new": "create"
	},
	initialize: function(){
		this.collection = new List(todos);
		this.render();
	},
	
	render: function() {
		this.$el.find('article').remove();
		_.each(this.collection.models, function(item){
			var todoView = new TodoView({
				model: item
			});
			var renderView = function(){
				todoView.render();
				$('#todos').append(todoView.el);
			}
			renderView();
			return;
		});
	},
	create: function(e){
		e.preventDefault();
		this.collection.add(new Todo({
			text: $('#new').val(),
			done: false
		}))
		this.render();
		$('#new').val('');
	},
	saveLocal: function(){
	}
});

var todo = new TodosView();