Backbone view click event not firing

Question

Here is the code:

var view = Backbone.View.extend({
  el:'#comment',
  template:'',
  initialize:function(){
    this._getTemplate();
    this.render();
  },
  event:{
    'click #submit_btn' : 'submit'
  },
  _getTemplate:function(){
    $.ajax({
      ...
    });
  },
  render:function(){
    this.$el.html(this.template);
  },
  submit:function(event){
    alert('click');
  }
});

I use ajax to get html template from server and it works well. I have no problem in loading template.

Here is the div which I wanna insert the template into.

<div id="comment">...</div>

Here is the template. I just show the simple structure.

<div>...</div>
<button id="submit_btn">submit</button>
<div>...</div>

Can someone help me to solve it?

Answer 1

It looks like the event string is set up correctly and the render function is doing the right thing. The one issue I see is that the 'initialized' function should be 'initialize' as per the Backbone View Extend documentation.

Reference: http://backbonejs.org/#View-extend

Answer 2

The event not firing because when the event is attempted to bind to the DOM element (ie at the time of the View construction), the DOM element does not exist. From the Backbone docs :

Backbone will automatically attach the event listeners at instantiation time, right before invoking initialize.

Since the #submit_btn DOM element matcher returns nothing, no event is bound.

Your technique of fetching the template within the initialize() method will be problematic. In most OO-based development patterns, the Constructor of the object should not do a lot of work, and the returned instance should be fully initialized when the Constructor completes. Backbone Views are no different in this respect. Your Constructor as written here attempts to do quite a bit of work, but there is no benefit to fetching the template as a part of the object creation here. In fact there is some harm too: what if you end up creating more than one instance of your View ? You would end up fetching the template more than once, even though the contents would be the exact same.

Forcing an XHR of any kind to be synchronous is also going to be problematic. During a synchronous request the browser's main thread is busy waiting for the response. In this example if the template ever takes longer than a few hundred milliseconds to arrive, your application will appear "frozen" to the user. This provides a very poor user experience. Asynchronous code may feel like it's more complex, but if you are building a JS-based application of even minimal complexity you will be required to deal with it. Since Javascript is (mostly) single-threaded, asynchronous execution becomes an essential tool of any application.

A better solution is to either embed the template into the hosting HTML page content, or use a JS modularization technique (RequireJS, CommonJS, others) to effectively package the template up with the module that needs it.