JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    
    <div class="container">
		<h1>Student Manager</h1>
		<hr>
		<div class="page">
			<a id="highScoreBtn" class="btn btn-primary" href="#">Show high Score</a>
			<hr>
			<ul>
				
			</ul>
		</div>
	</div>
	<script id="studentTemplate" type="text/template">
		<strong class="list">Name :</strong> <%= name %> <span>Scored:</span> <%= scored %>
	</script>

CSS

li{
			border-bottom:1px solid gray;
			list-style: none;
			padding: 10px;
		}
		ul{
			padding:0;
			margin:0;
		}

		li:last-child{
			border: 0;
		}

JavaScript

var student = [
		{name:"student0",scored:75},{name:"student1",scored:49},{name:"student2",scored:25},
		{name:"student3",scored:96},	{name:"student4",scored:42},	{name:"student5",scored:85},	
		{name:"student6",scored:68},	{name:"student7",scored:19},	{name:"student8",scored:85},
		{name:"student9",scored:26}
	]


var model = Backbone.Model.extend({
    defaults:{
        name:"undefined",
        scored:"0"
    }
});

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

var studentView = Backbone.View.extend({
	tagName:'li',
	events:{
		'click':"called"
	},
	template:_.template($("#studentTemplate").html()),
	render:function(){
		this.$el.append(this.template(this.model.toJSON()));
        this.model.get('scored') > 60 ? this.$el.addClass("active") : null;
		return this;
	},
    called:function(){
        this.model.set('name','text');
    }
});

var studentsView = Backbone.View.extend({
    el:$(".page"),
    events:{
    	"click #highScoreBtn":"showHighScore"
    },
    initialize:function(){
    	this.collection = new collection(student);
    	this.render();
        this.collection.on('change', this.renderOne,this);
    },
    render:function(){
    	var that = this;
        _.each(this.collection.models, function(item){
        	that.$el.find('ul').append(new studentView({model:item}).render().el);
        })

    },
    renderOne:function(data){
        this.$el.find('ul').append(new studentView({model:data}).render().el);
    }
})

var newStudentList = new studentsView();