0

At 22:30 of this video tutorial, https://www.youtube.com/watch?v=hBVYDVy3QNI, the author does something in coffeescript that I'm unable to translate to Javascript. He maintains the context of a custom region from within an inner callback using a fat arrow. As such, he is able to call close on the region from within a dialog close callback? How do I do that in Javascript?

Here is my custom region attempt but it fails on the call to this.closeDialog() because "this" refers to the dialog and not the region:

    var DialogRegion = Backbone.Marionette.Region.extend({

        onShow: function (view) {
            this.$el.dialog({
                modal: true,
                resizable: false,
                draggable: false,
                width: "600px",
                close: function (e, ui) {
                        this.closeDialog()//This doesn't work.  Wrong context.  Need outer DialogRegion context?                
                }
            })
        },        

        closeDialog: function () {
            this.close();
            this.$el.dialog("destroy");
        }

    });
Robert
  • 828
  • 2
  • 13
  • 28

1 Answers1

0

If you can assume a reasonably modern JavaScript then you can use Function.prototype.bind:

The bind() method creates a new function that, when called, has its this keyword set to the provided value [...]

That would look like this:

close: function (e, ui) {
    this.closeDialog();
}.bind(this)

You're using Marionette so you're using Backbone and that implies that Underscore is available. That means that you could use _.bind if you don't want to use the native bind:

close: _(function (e, ui) {
    this.closeDialog();
}).bind(this)

You're using jQuery-UI so you should have $.proxy available too. $.proxy serves the same purpose as _.bind and you'd use it thusly:

close: $.proxy(function(e, ui) {
    this.closeDialog();
}, this)

The "classic" option is the one that elclanrs mentions in the comments:

onShow: function (view) {
    var _this = this;
    this.$el.dialog({
        //...
        close: function (e, ui) {
            _this.closeDialog()
        }
    });
}

All four of those will be functionally equivalent to the close: (e, ui) => ... you saw in the CoffeeScript video.

Community
  • 1
  • 1
mu is too short
  • 426,620
  • 70
  • 833
  • 800
  • 1
    And what about `$.proxy`? Any thoughts on that one with regard to the above mentioned methods? Edit: See https://stackoverflow.com/questions/3349380/jquery-proxy-usage. So better use the native or underscore `bind`. – Wilbert van de Ridder May 19 '14 at 10:11
  • @WilbertvandeRidder: Right, I tend to forget about `$.proxy` since I usually have Underscore available. You could use `$.proxy` too, the `var _this = this` approach seems to be more common in the jQuery world though. – mu is too short May 19 '14 at 18:07
  • Excellent. Lots of options. Thanks much. First and last work. I'll verify the other two as well when I get a chance here. Based on what I'm reading at the links you provided, they should work. – Robert May 20 '14 at 07:48