gistfile1.js

var StudentListView = Backbone.View.extend({
	tagName: 'div',
	className: 'students-list',
	template: _.template($('#students-list-template').html()),
	initialize: function(){
		this.listenTo(this.collection, 'sync', this.render);
	},
	events: {
		'submit form': 'onSubmit'
	},
	onSubmit: function(event) {
		event.preventDefault();
		var name = $("#student-new").val();
		this.collection.create({name: name});
		$('input').val('');
	},
	render: function(){
		var renderedStudents = this.template({
				students: this.collection
			});
		this.$el.html(renderedStudents);
		return this.$el;
	}

});

// var studentListView = new StudentListView({
//	collection: studentsCollection
// });

var StudentDetailView = Backbone.View.extend({
	tagName: 'form',
	className: 'student-detail',
	template: _.template($('#student-detail').html()),

	events: {
		'submit form': 'onSubmit'
	},
	onSubmit: function(event) {
		event.preventDefault();

	},
	render: function(){
		var renderedStudent = this.template({
			model: this.model
		});
		return this.$el.html(renderedStudent);
	}
});

// var studentDetailView = new StudentDetailView({
//	model: student
// });
 
var StudentRouter = Backbone.Router.extend({
  routes: {
    'students': 'list',
    'students/:id': 'detail',
    '*default': 'list'
  },
 
  clearView: function() {
    if (this.view) this.view.remove();
    this.view = null;
  },
 
  list: function() {
  	console.log("yooo")
    this.clearView();
    this.view = new StudentListView({collection: studentsCollection});
    this.view.render().appendTo('#students-container');
  },
 
  detail: function(cid) {
  	console.log("heyyyy")
    this.clearView();
    var student = studentsCollection.get(cid);
    this.view = new StudentDetailView({model: student});
    this.view.render().appendTo('#students-container');
  }
});
 
var router = new StudentRouter();
Backbone.history.start();