Backbone View events not firing

Question

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>

score 56 · Accepted Answer · edited Aug 14 '12 at 21:28

56

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.

edited Aug 14 '12 at 21:28

Radu

8,561
8
55
91

answered Jun 18 '11 at 01:01

Elf Sternberg

16,129
6
60
68

2

FYI: Declaring the $el in the view's initialize function is OK too. – Fatmuemoo Apr 02 '13 at 18:06
2

Possibly confused reader: Nowadays, this isn’t necessary. If you don’t specify `el`, a `div` is created for you, and all events are tied to that. – Jezen Thomas Oct 08 '13 at 18:13

Backbone View events not firing

1 Answers1