JavaScript Namespace & jQuery Event Handler

Question

I have created a Javascript namespace to avoid conflict with other Javascript codes.

var ns = {
   init: function() {
      $('a').click(this.clickHandler);
   },
   clickHandler: function() {
      // Some code here ..

      // The keyword "this" does not reference my "ns" object anymore. 
      // Now, it represents the "anchor"
      this.updateUI();
   },
   updateUI: function() {
      // Some code here ...
   }
};

Please, how can I reference my enclosing namespace?

score 6 · Accepted Answer · answered Jun 19 '13 at 16:04

6

$.proxy

$('a').click($.proxy(this.clickHandler, this));

answered Jun 19 '13 at 16:04

Musa

96,336
17
118
137

score 4 · Answer 2 · answered Jun 19 '13 at 16:06

4

You can bind event handler to an anonymous function and call clickHandler within it. This way the context will still refer to ns object.

var ns = {
   init: function() {
      var self = this; // store context in closure chain
      $('a').click(function () {
         self.clickHandler();
      });
   },
   clickHandler: function() {
      this.updateUI();
   },
   updateUI: function() {
      // Some code here ...
   }
};

answered Jun 19 '13 at 16:06

halilb

4,055
1
23
31

How does 'this' get the right value inside the clickHandler function? – Lee Meador Jun 19 '13 at 16:29
@LeeMeador, context points to dom object in dom objects' event handlers. In our anonymous event handler, the context points to dom element and we use closure variable to get original context. Finally, when clickHandler invokes, it will have the correct context as it is invoked by ns object. – halilb Jun 19 '13 at 16:33
1

I see. Still figuring out how the 'this'/context gets set. I tried it here in case anyone else wants to see it. http://jsfiddle.net/LMaBq/ – Lee Meador Jun 19 '13 at 16:34

score 1 · Answer 3 · answered Jun 19 '13 at 16:18

Here is an article: http://www.codeproject.com/Articles/108786/Encapsulation-in-JavaScript

It explains to create a closure in the namespace where you can store stuff (like the original 'this')

var ns = (function () {
    var self;

    return {
        init: function () {
            self = this;
            $('a').click(this.clickHandler);
        },
        clickHandler: function () {
            // Some code here ..
            self.updateUI();
        },
        updateUI: function () {
            // Some code here ...
        }
    };
})();

FIDDLE HERE

duckbrain · Answer 4 · 2013-06-19T16:28:47.503

0

A good way to do that is to define a local variable in a function that refers to it. This helps when "this" changes on you. Your code could look something like this:

var ns = new (function() {
    var self = this;
    self.init = function() {
        $('a').click(self.clickHandler);
    },
    self.clickHandler = function() {
        // Some code here ..

        // The keyword "this" does not reference my "ns" object anymore. 
        // Now, it represents the "anchor"
        self.updateUI();
   },
   self.updateUI = function() {
      // Some code here ...
   }
})();

This allows you to still reference the event handler with this and then reference your namespace with the locally defined reference that is only available from within.

edited Jun 19 '13 at 16:28

answered Jun 19 '13 at 16:15

duckbrain

1,219
1
13
26

It can be fixed as shown here http://jsfiddle.net/JYAXL/ -- Only one change needed. The problem is that 'self' will get the context value (the value of the 'this') at the time when the object is created to be assigned to 'ns'. – Lee Meador Jun 19 '13 at 16:26
You're right, my mistake. I was thinking of a function. I updated to fix it. – duckbrain Jun 19 '13 at 16:27

JavaScript Namespace & jQuery Event Handler

4 Answers4