7

In short: I would like to bind the result of .bind as an arguement in it's own call

var bound = foo.bind(this,bound);

because I'm not sure how else to solve my problem.

The problem:

I have an item that is dependent on an array of other items. Once one of those items is removed I want to remove the dependent item, and remove all the listeners placed on the dependencies.

I'm struggling to remove the eventhandlers of the other dependencies. I'm trying to use bind, but since the handler function is the one that removes the listeners, I find that I would have to bind the result of the bind() call in it's own call as an argument. This does ofcourse not work.

The bind call bellow binds the unbound version of 'handler' as a parameter, and thus removeEventListener does not work as it is a different copy of the function.

The question is: can I use bind to do this and/or how can I otherwise solve this?

Im using eventemitter3, but it should be the same for any event library.

setHandlers(dependentItem,dependencies)
{
    var handler = this.onDependencyRemoved;
    handler = handler.bind(this,dependentItem,dependencies,handler);//bind itself as third argument
    dependencies.forEach(dependency => {
        dependency.addEventListener("removed",handler);
    });
}
onDependencyRemoved(dependentItem,dependencies,handler)
{
     dependentItem.remove();
     dependencies.forEach(dependency => {
          dependency.removeEventListener("removed",handler);
     });
}

edit:

Complete working example to run in nodejs:

const EventEmitter = require('events');
//const EventEmitter = require('eventemitter3');

class MyEmitter extends EventEmitter {
    remove() {
        console.log("I'm being removed, this should happen only once");
    }
}
var dependent = new MyEmitter();
var dependencies = [new MyEmitter(),new MyEmitter()];

var handler = (e) => removeHandler(dependencies,dependent,handler);

dependencies.forEach(dependency => dependency.once('removed',handler));

var removeHandler = function(dependencies,dependent,handler) {
    //remove the dependent object because one of the dependencies was removed
    dependent.remove();
    //remove the listeners from all of the dependencies
    dependencies.forEach(dependency => {
        console.log('before removing: '+dependency.listeners('removed').length);
        dependency.removeListener('removed',handler);
        console.log('after removing: '+dependency.listeners('removed').length);
    });
}

//should remove the dependent object
dependencies[0].emit("removed");
//should not do anything anymore since the listeners are removed
dependencies[1].emit("removed");
Erik Philips
  • 48,663
  • 7
  • 112
  • 142
Flion
  • 9,051
  • 12
  • 40
  • 61
  • Use [event delegation](https://stackoverflow.com/a/1688293/402037) and add _one_ handler on a parent element. – Andreas Oct 04 '17 at 11:32
  • @Andreas I'm in node.js. The items are models / ES6 class instances, not DOM items. – Flion Oct 04 '17 at 11:48

2 Answers2

7

You cannot do this using bind, but you can do this relatively easy by using a closure - either directly for the function to be bound, or in your own helper function similar to bind. It's as simple as

const handler = (e) => this.onDependencyRemoved(dependentItem, dependencies, handler, e);

I'm not sure however why those two functions are methods of anything; they look rather static. It might make sense to make them methods of the dependentItem, in which case the arguments and even the whole handler don't need to be stored in closure variables, but could be made instance properties to be initialised in the constructor.

Bergi
  • 513,640
  • 108
  • 821
  • 1,164
  • with the closure it still doesnt work. When I remove the event listener the handler once registered does not match (`===`) with the handler used by `onDependencyRemoved`. I've edited the question with the closure setup. – Flion Nov 13 '17 at 15:33
  • @Flion I cannot reproduce, your code should work. I believe you either haven't shown your complete actual code or the problem is elsewhere. Can you make a [mcve]? I'm also curious how you could check `===` "*against the handler function once saved with addEventListener*", as `addEventListener` doesn't make its store available – Bergi Nov 13 '17 at 15:45
  • 1
    yeah I just made a minimal complete example and it worked fine both with node.js native EventEmitter and the `eventEmitter3` library. I realised not all the time removeEventListener is called it removes something because the item that emitted the 'removed' event has already removed it's own because I use `once`. Tnx for the help! I will give bounty tomorrow. This was an important issue for me and I never knew a simple closure could reuse a value in its own function like you showed. – Flion Nov 13 '17 at 16:12
6

There are better ways to solve your problem that others have mentioned. However, there is a more fundamental problem with the code:

var bound = foo.bind(this,bound);

The value of bound in your code, at the time of execution, is undefined. This is the equivalent of just calling foo.bind(this) which is probably not what you want.

Guy Royse
  • 414
  • 2
  • 4