Backbone.js views - binding event to element outside of "el"

Question

The 2nd answer to this question nicely explains how event declarations in Backbone.js views are scoped to the view's el element.

It seems like a reasonable use case to want to bind an event to an element outside the scope of el, e.g. a button on a different part of the page.

What is the best way of achieving this?

Answer 1

there is not really a reason you would want to bind to an element outside the view, there are other methods for that.

that element is most likely in it's own view, (if not, think about giving it a view!) since it is in it's own view, why don't you just do the binding there, and in the callback Function, use .trigger(); to trigger an event.

subscribe to that event in your current view, and fire the right code when the event is triggered.

take a look at this example in JSFiddle, http://jsfiddle.net/xsvUJ/2/

this is the code used:

var app  = {views: {}};

app.user = Backbone.Model.extend({
    defaults: { name: 'Sander' },
    promptName: function(){
        var newname = prompt("Please may i have your name?:");
        this.set({name: newname});
    }
});

app.views.user = Backbone.View.extend({
    el: '#user',
    initialize: function(){
        _.bindAll(this, "render", "myEventCatcher", "updateName");
        this.model.bind("myEvent", this.myEventCatcher);
        this.model.bind("change:name", this.updateName);
        this.el = $(this.el);
    },
    render: function () {
        $('h1',this.el).html('Welcome,<span class="name">&nbsp;</span>');
        return this;
    },
    updateName: function() {
        var newname = this.model.get('name');
        console.log(this.el, newname);
        $('span.name', this.el).text(newname);
    },
    myEventCatcher: function(e) {
        // event is caught, now do something... lets ask the user for it's name and add it in the view...
        var color = this.el.hasClass('eventHappened') ? 'black' : 'red';
        alert('directly subscribed to a custom event ... changing background color to ' + color);
        this.el.toggleClass('eventHappened');

    }
});

app.views.sidebar = Backbone.View.extend({
    el: '#sidebar',
    events: {
        "click #fireEvent" : "myClickHandler"
    },
    initialize: function(){
        _.bindAll(this, "myClickHandler");
    },
    myClickHandler: function(e) {
        window.user.trigger("myEvent");
        window.user.promptName();
    }
});


$(function(){
    window.user = new app.user({name: "sander houttekier"});
    var userView = new app.views.user({model: window.user}).render();
    var sidebarView = new app.views.sidebar({});
});

Answer 2

Update: This answer is no longer valid/right. Please see other answers below!

Why do you want to do this?

Apart from that, you could always just bind it using regular jQuery handlers. E.g.

$("#outside-element").click(this.myViewFunction);

IIRC, Backbone.js just uses the regular jQuery handlers, so you're essentially doing the same thing, but breaking the scope :)