attach event to object/array

Question

Let's say for you example you have this array

 //Defined at the top of your class
 myArray = [];
 //Then somewhere else in the code
 myArray["unique_id"] = {example: true, example2: false, etc..};
 //somewhere else
 delete myArray["unique_id"];

Could it be possible to have something like this:

//when adding
myArray["unique_id"] = {example: true, example2: false, etc..};
myArray.trigger("array:update");
//when deleting
delete myArray["unique_id"];
myArray.trigger("array:delete");

//and in a different file or somewhere else down the path
myArray.on("array:update", function(){
   //do stuff
});

//and in a different file or somewhere else down the path
myArray.on("array:delete", function(){
   //do stuff
});

I like the custom event system and I was wondering if thats something possible. Didn't find examples on the documentation of this specific application. Basically attaching custom events to array/objects and not necessarily dom elements.

No this is not possible to do without manually calling trigger on update or manually calling delete on deletion. You can wrap these behaviors in a single call and then when you make the call it all happens at once, but it still requires custom setup. — Travis J
– Travis J, Commented May 17, 2016 at 23:20
What if I created a dummy div like $("<div>") and then listen to my custom events on it. Would that be an acceptable hack ? — delmalki
– delmalki, Commented May 17, 2016 at 23:24
Are you sure you want to use an Array? delete myArray["unique_id"]; looks like you want to use a regular object. Arrays have the items stored with an index 0..n, and not a string as index and removing an elment from an Array is not done using delete. — t.niese
– t.niese, Commented May 17, 2016 at 23:26
Just change the first line with {}. I always forget the distinction as from php, array are versatile. — delmalki
– delmalki, Commented May 17, 2016 at 23:33
The you moste likely look for EventEmitter3. But you need to trigger the delete,update events manually. — t.niese
– t.niese, Commented May 17, 2016 at 23:38

Patrick Roberts · Accepted Answer · 2016-05-18 00:07:59Z

This is possible using a Proxy, but you'll have to make the object emulate an EventEmitter first:

//Defined at the top of your class
let myObject = {};

//Emulate EventEmitter
myObject._events = {};
myObject.emit = function emit(event, ...args) {
  (this._events[event] || []).forEach(callback => {
    callback.apply(this, args);
  });
};
myObject.on = function on(event, callback) {
  if (!this._events[event]) {
    this._events[event] = [];
  }

  this._events[event].push(callback);
};

//Define Proxy
let myProxy = new Proxy(myObject, {
  set(target, name, value) {
    target.emit('update', name, value);
    return (target[name] = value);
  },
  deleteProperty(target, name) {
    target.emit('delete', name);
    return (delete target[name]);
  }
});

//and in a different file or somewhere else down the path
myObject.on('update', function(name, value) {
  console.log('update', this, name, value);
});

//and in a different file or somewhere else down the path
myObject.on('delete', function(name) {
  console.log('delete', this, name);
});

//Then somewhere else in the code
myProxy["unique_id"] = {
  example: true,
  example2: false
};
//somewhere else
delete myProxy["unique_id"];

Collectives™ on Stack Overflow

attach event to object/array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related