Backbone

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Just a Page</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="//underscorejs.org/underscore.js" ></script>
<script src="//backbonejs.org/backbone-min.js" ></script>


</head>

<body>
<div class="container">
<h1>Home Page</h1><hr>
<div class="page"></div>
</div>
</body>
<script type="text/template" id="songlist_template">

<%
_.each(songs, function(songs){ %>
<%= songs.get("name") %>
<%
});
%>
<h1>Loaded</h1>
</script>

<script>
var Song =Backbone.Model;
var Songs=Backbone.Collection.extend({
	model: Song,
	url:'/data/file.json',
	parse: function (response) {
        return response
	}
});

var SongList=Backbone.View.extend({
	el:'.page',
	render: function(){
		var that=this;
		var songs=new Songs();
		songs.fetch({
			success:function (songs){

				var temp=_.template($("#songlist_template").html());
				var html=temp({songs : songs});
				console.log(Songs);
				that.$el.html(html);
				},
			error: function (collection, response, options) {
				alert("error!! "+response.responseText);
				}
		})
	}
});

var Router=Backbone.Router.extend({
	routes:{
		'': 'home'
		}
});

var song=new SongList();

var router=new Router();
router.on('route:home',function(){
	song.render();
});
Backbone.history.start();

</script>
</html>