0

Talking about XBL is not exactly talking about javascript. So I'll create this question that's related to this one, but now about XBL, where I'm not the creator of the root javascript code, but just of the methods and event handlers inside the bindings.

--

In some cases, the this keyword may not refer to the object I expect it to. (recent example: in an key event, in my XBL)

What's the best approach to avoid this kind of mistake?

For now, I'm using always the getElementById (or $.fn from jQuery), but I'm not sure if it's the best approach.

--update

A little bit more details:

Within a XBL method the only way to access the element that was defined in the Xul file (the GUI description file) without using "this" (as it may not be the "this" I expect) is with getElementById, and this makes the code not reusable, so I'm looking for alternatives..

Community
  • 1
  • 1
The Student
  • 27,520
  • 68
  • 161
  • 264

2 Answers2

1

As you've heard elsewhere, the problem is that the this parameter isn't necessarily the object you first thought of, especially when you're talking about event handlers and the like. The best way I found is to write a small function that will bind some object as the this variable and return another function that uses the binding to call the original function.

Take a look at this code:

var bindFunction = function(self, f) {
  return function() {
    return f.apply(self);
  };
};

var foo = function() {
  alert(this.hello);
};

var bar = { 
  hello: "Hello there"
};

var boundFoo = bindFunction(bar, foo);
boundFoo();

What I have is a function called bindFunction that takes an object (called self) and some function, and returns another function that will call the passed-in function applying the self object as the this variable.

The rest of the code is just some test code: a foo function that will alert this.hello, a bar object with a hello member, and how you can bind foo with bar.

In essence, I've taken a function that accepts no parameters and generated another function that will ensure the first is always called with the correct this variable. Ideal for event handlers.

(Sorry, but I know nothing about XBL, so I hope this will be of use.)

jmbucknall
  • 2,061
  • 13
  • 14
  • `bind` is built in EcmaScript 5, and the new `strict` mode makes a lot of `this` problems fail fast. – Mike Samuel Jan 06 '11 at 22:30
  • Thanks for answering, in your example you have the "bar" to use as "self", but within a [XBL method](https://developer.mozilla.org/en/XUL_Tutorial:Adding_Methods_to_XBL-defined_Elements) the only way to access the element that was defined in the [Xul](https://developer.mozilla.org/en/XUL) file (the GUI description file) is with getElementById, and this makes the code not reusable, so I'm looking for alternatives.. – The Student Jan 07 '11 at 11:51
  • 1
    Instead of writing otherDoc.addEventListener("event", this.myMethod, false); you now write otherDoc.addEventListener("event", this.bindFunction(this, this.myMethod), false); – Neil Jan 10 '11 at 21:04
  • Now, I found out that I can use an approach like `var self = this` and `addEventListener("event", function() { self.myMethod() }, false)`. – The Student Jan 11 '11 at 11:18
0

If there's not a best answer, a good approach could be use javascript files instead of XBL for the implementation. Looking the Xulrunner source code, looks like most code does this.

But I still would like to use XBL, if there was a way to work fine with it..

The Student
  • 27,520
  • 68
  • 161
  • 264