Question

I am building a js heavy app using backbone.js. One problem I’ve run into a couple of times is how to call an outer object from a deep nested function. In the code example below, I would like to call the custom_function event when a slide event occurs. What is the best way to do this?

App.Views.Category = Backbone.View.extend({
    ....,
    render: function () {

        $('#slider').slider({
            min:0,
            max:100,
            slide: function(event, ui) {
               //HOW DO I CALL THE custom_function from here????

            },

        });
    },

    custom_function: function() {
       alert('in custom function');
    },


});

asdf

Answer 1

There are two common options.

You can either this into an object like that or self then call it.

render: function () {
    var that = this;
    $('#slider').slider({
        min:0,
        max:100,
        slide: function(event, ui) {
           //HOW DO I CALL THE custom_function from here????
           that.custom_function();
        },

    });
},

Or you can bind the context of the function.

render: function () {
    $('#slider').slider({
        min:0,
        max:100,
        slide: (function(event, ui) {
           //HOW DO I CALL THE custom_function from here????
           this.custom_function();
        }).bind(this),

    });
}, 

Function.prototype.bind is ES5 only so use _.bind or $.proxy for cross browser support