Javascript: Attacher un Écouteur d'Événement à table pour Push() de l'Événement

Vous pouvez utiliser un 'eventify" fonction qui remplace les pousser dans le tableau transmis.

var eventify = function(arr, callback) {
    arr.push = function(e) {
        Array.prototype.push.call(arr, e);
        callback(arr);
    };
};

Dans l'exemple suivant, 3 alertes devrait être soulevée qu'est ce que le gestionnaire d'événements (rappel) après eventify a été appelé.

var testArr = [1, 2];

testArr.push(3);

eventify(testArr, function(updatedArr) {
  alert(updatedArr.length);
});

testArr.push(4);
testArr.push(5);
testArr.push(6);

essayez ceci:

var MyArray = function() { };
MyArray.prototype = Array.prototype;
MyArray.prototype.push = function() {
    console.log('push now!');
    for(var i = 0; i < arguments.length; i++ ) {
        Array.prototype.push.call(this, arguments[i]);
    }
};

var arr = new MyArray();
arr.push(2,3,'test',1);

vous pouvez ajouter des fonctions à la suite d'une poussée ou avant de pousser

J'avais envelopper le tableau original autour d'un simple observateur de l'interface comme si.

function EventedList(list){
    this.listbase = list;
    this.events = [];
}

EventedList.prototype.on = function(name, callback){
    this.events.push({
        name:name,
        callback:callback
    });
}

//push to listbase and emit added event
EventedList.prototype.push = function(item){
    this.listbase.push(item);
    this._emit("added", item)
}

EventedList.prototype._emit = function(evtName, data){
    this.events.forEach(function(event){
        if(evtName === event.name){
            event.callback.call(null, data, this.listbase);
        }
    }.bind(this));
}

Puis j'avais l'instancier avec une base de la matrice de

    //returns an object interface that lets you observe the array
    var evtList = new EventedList([]);

    //attach a listener to the added event
    evtList.on('added', function(item, list){
         console.log("added event called: item = "+ item +", baseArray = "+ list);
    })

    evtList.push(1) //added event called: item = 1, baseArray = 1
    evtList.push(2) //added event called: item = 2, baseArray = 1,2
    evtList.push(3) //added event called: item = 3, baseArray = 1,2,3

vous pouvez également étendre l'observateur d'observer d'autres choses comme prePush ou postPush ou n'importe quel événement que vous souhaitez émettre comme vous interagir avec la base interne de la matrice.

Parfois, vous avez besoin de faire la queue choses avant de rappel est disponible. Cela résout le problème. Appuyez sur n'importe quel élément(s) pour un tableau. Une fois que vous voulez commencer à consommer ces éléments, passer le tableau et un rappel à QueuedCallback(). QueuedCallback ne pas surcharger array.push que votre rappel, puis faire défiler toute la file d'attente des éléments. Continuer à appuyer sur les éléments de ce tableau et ils seront envoyés directement à votre rappel. Le tableau reste vide.

Compatible avec tous les navigateurs et IE 5.5+.

var QueuedCallback = function(arr, callback) {
  arr.push = callback;
  while (arr.length) callback(arr.shift());
};

Exemple d'utilisation ici.

Beaucoup mieux est d'utiliser le fait que ces méthodes de modifier la longueur du tableau.
La façon de tirer parti de ce qui est assez simple (CoffeeScript):

class app.ArrayModelWrapper extends Array
  constructor: (arr,chName,path)->
    vl  = arr.length
    @.push.apply(@,arr)
    Object.defineProperty(@,"length",{
      get: ->vl
      set: (newValue)=>
        console.log("Hello there ;)")
        vl = newValue
        vl
      enumerable: false
    })

fin de débogage, vous pouvez essayer. Et de suivre l'appel de la fonction à partir de la pile d'appel.

yourArray.push = function(){debugger;}