Backbone View events not firing

I am using Rails3 as my backend and Jammit to asset… Now I am trying to not compress and even package the assets.

The simple event don’t get run, but the alert(‘asd’) int initialize is working as expected.

I have already tried other kinds of events in other objects too, but it didn’t work.

My code as follow:

var InvoiceStock = Backbone.View.extend({
  initialize: function(args) {
    _.bindAll(this, 'find_product', 'product_added');

    this.products = new ProductCollection();

    this.products.bind('add', this.product_added);

    alert('asd');
  },

  events: {
    "keypress #product_finder": "find_product"
  },

  find_product: function(e) {
    alert('teste');
  },

  product_added: function(product) {
    alert('pqp4');
  }
});

and my RUBY HTML:

 <%= text_field 'search', :isbn_or_isbn10_or_publisher_or_authors_or_name_like, :id => 'product_finder' %> ou
 <%= link_to 'criar um produto', '', :id => 'new_product_link' %>.

which generates this:

<label>Adicionar</label>
<input id="product_finder" class="ui-autocomplete-input" type="text" size="30" name="search[isbn_or_isbn10_or_publisher_or_authors_or_name_like]" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
ou
<a id="new_product_link" href="">criar um produto</a>

Answer

Backbone views happen within the context of an element. In order for this code to work, you must assign that element to the View at construction time like this:

var InvoiceStock = Backbone.View.extend({
    el: $('#product_finder').parent()

...

Or assign to el the specific DOM object that contains the product finder. As an alternative, you can generate the element dynamically and use jQuery to attach it to your DOM. I’ve used both.

Backbone uses jQuery delegate to specify and contextualize its events. IF you don’t specify the parent element for the entire view, Backbone does not assign the event manager correctly.