Reputation: 10153

Trouble getting Backbone.js view event to fire

It appears as though the following code is getting inside initialize but my event doesn't appear to be firing.

What am I missing here?

var index = (function ($, window, document) {

    var methods = {};

    methods = {
            init: function () {

            },

            getView: Backbone.View.extend({
              el: $('.settings'), 

              events: { 
                 'click .settings': 'addUl'
              },

              initialize: function () {
                  console.log('init');
              },

              render: function () {
              },

              addUl: function () { 
                console.log('addUI');
                this.el.append("<ul> <li>hello world </li> </ul>");
              }
            })
    };

    return methods;   } (jQuery, window, document));

var stuff = new index.getView();

Link to the jsbin

Upvotes: 3

Answers (3)

Jeremy Chone

Reputation: 3167

The problem is that it is your view element ($el) that has the settings class and not a child.

click .settings tells backbone to bind a "click" event on the $el for any children that have .settings. However, because, it is $el which has the class settings the binding never match.

This is why when you remove .settings it works, because you say "any 'click' on $el"

The reason the documentation says click .blah is because it assumes that the html element(s) with the class='blah' are children of the $el element.

Hope this help.

Upvotes: 3