How to use events on backboneJS views

StackOverflow https://stackoverflow.com/questions/22689650

Question

So I'm trying to learn how to use the backbone events using the documentation but I'm stuck at the events part, when I click on the page class content it should alert "page tag has been clicked" but it throws an error on the commented line.

<body>
        <div class="page"></div> 
</body>

<script type="text/javascript">
    var View = Backbone.View.extend({
        initialize: function()
        {
            this.render(); 
        },
        render: function()
        {
            this.$el.html('Click me im an element');
        },
        events: function()
        {
                       //Uncaught SyntaxError: Unexpected token : 
            "click .page" : "callme"
        },
        callme: function()
        {
            alert('page tag has been clicked');
        }
    });

    var view = new View({
        el: '.page'
    });
</script>
Was it helpful?

Solution

  1. Your events property must be either a hash 

    events: {
    "click .page" : "callme"
}

    or a function that returns a hash

    events: function() {
    return {
        "click .page" : "callme"
    };
}

  2. You indicate a .page selector but that's your view element. Either use a global selector

    events: {
    "click " : "callme"
}

    or set your el to an ancestor node, for example

    var view = new View({
    el: 'body'
});

OTHER TIPS

The events is actually just an object it isn't a function. It'll work with the code below. Hope that helps. 

events: {
 "click .page" : "callme"
}

The other error you have is that you're not actually using the Backbone view.

You create the View correctly but you're not appending it to the view as far as I can tell.

You'd need to do something like.

$('body').html(view.render().el);

That will append your view to the DOM and add all of the event listeners.

Also instead of passing in the el to the BackboneView you could just add the class of page onto the View. Example below. 

className: page,

You actually have two problems with your code, the first is that you are using a function for our events hash without returning an object (using a function is fine, but you need to return an object, or bind directly to the events hash). The second is that your are listing for an event for a child element with the page class, which doesn't exist. You want to either remove the class from where you are binding to the event and just listen to a click anywhere in your view, or listen to an existing element.

For example

   var View = Backbone.View.extend({
        initialize: function()
        {
            this.render(); 
        },
        render: function()
        {
            this.$el.html('Click me im an element');
        },
        events: {
            "click" : "callme"
         },
        callme: function()
        {
            alert('page tag has been clicked');
        }
    });

    var view = new View({
        el: '.page'
    });

http://jsbin.com/temicema/1/

That should be enough to get your code working, however it is probably worth understanding how backbone events work. When you specify an event in backbone that event is bound to the root el and and then listens to the events you specify matching the selector you specified. Under the hood backbone is basically using jQuery's .on to delegate the events, so in your case backbone is basically doing this.$el.on('click, '.page', this.callme).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top