Home/ Questions/Q 9152311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:00:42+00:00

I am starting with my first backbonejs app. I just have the two buttons

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0