I am starting with my first backbonejs app. I just have the two buttons for which i want to populate the template with a simple value. Here is the complete code for my page:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
</head>
<body>
<button class="btn" id="dashboardBtn">Dashboard</button><button id="ledgersBtn" class="btn btn-warning">Ledgers</button>
<script type="text/template" id="heading">
<h1><%= heading %></h1>
</script>
<div id="container">Loading...</div>
<!-- JAVASCRIPT -->
<script type="text/javascript">
var app ={};
app.Page=Backbone.View.extend({
el:"#container",
template: _.template($("#heading").html()),
events:{
'click #dashboardBtn':'loadDashboard',
'click #ledgerBtn':'loadLedger'
},
loadDashboard: function(){
this.$el.html(template({heading:"Dashboard"}));
},
loadLedger: function(){
this.$el.html(template({heading:"Ledgers"}));
}
});
//-----------INITIALIZERS----------------
app.page=new app.Page();
</script>
When i click on the buttons, nothing happens. Nothing is shown in the console as well. I know i am doing something stupid here but don't know what. Help..