backbonejs app simply doesnt work

Question

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..

davids · Accepted Answer · 2013-01-18T17:18:08.053

I think the problem is the events part:

events:{
    'click dashboardBtn':'loadDashboard',
    'click ledgerBtn':'loadLedger'
}

dashboardBtn and ledgersBtn (be aware that you've typed it with 's' in the button element and without it in the events object) are ids, so it should look like this:

events:{
    'click #dashboardBtn':'loadDashboard',
    'click #ledgerBtn':'loadLedger'
}

EDIT:

I just realized that you set the view's el to #container, so the events object will reference everything it is inside of #container. So I would wrap the buttons:

<div id="container2">
   <button class="btn" id="dashboardBtn">Dashboard</button><button id="ledgersBtn"class="btn btn-warning">Ledgers</button>
</div>

And the javascript code would be:

app.Page=Backbone.View.extend({

el:"#container2",

template: _.template($("#heading").html()),

events:{
    'click #dashboardBtn':'loadDashboard',
    'click #ledgersBtn':'loadLedger'
},

loadDashboard: function(){

    this.$el.html(this.template({heading:"Dashboard"})); 
    },

loadLedger: function(){
    this.$el.html(this.template({heading:"Ledgers"}));
}

});

Besides, notice that you were calling template directly in loadDashboard and loadLedger, instead of this.template

i have edited my post and added # in event objects. Still doesn't work :( Nothing in console as well. — beNerd, Jan 18 '13 at 16:59
one quick question: I need to develop a webapp which would work offline as well as online. I am developing it in backbonejs. Is it safe to user browsers local storage for storing data for offline use? and then syncing to a online backend as well... — beNerd, Jan 18 '13 at 18:16
Check this out: http://stackoverflow.com/questions/9948284/how-persistent-is-localstorage — davids, Jan 19 '13 at 22:17

backbonejs app simply doesnt work

1 Answers1