Sous-vues Backbone et déliaison d'événements

Question

J'ai travaillé avec Backbone pendant quelques jours, en lisant des articles sur les modèles de conception et autres. Aujourd'hui, je me suis amusé avec des sous-vues, après avoir lu un tas de ressources. Principalement, ces 2 posts-

Derrick Bailey
http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Ian Storm Taylor
http://ianstormtaylor.com/assigning-backbone-subviews-made-even-cleaner/

Ces éléments, ainsi que d'autres, ont été très utiles pour m'aider à mettre en place certaines sous-vues et à gérer leur fermeture selon ce que je pensais être un modèle correct :

Backbone.View.prototype.close = function(){
    var ctx = this;
    _.each(ctx.subViews(), function(view) {
        view.close();
    });
    this.remove();
    this.unbind();
}

Aucun problème ici, semble faire ce que j'attendais. Mais je voulais le tester, juste pour voir ce qui se passait. J'ai donc arrêté d'appeler close sur les subViews et j'ai bouclé mon rendu environ 20 000 fois :

Backbone.View.prototype.close = function(){
    var ctx = this;
    _.each(ctx.subViews(), function(view) {
        //view.close();
    });
    this.remove();
    this.unbind();
}

Pas de gestionnaires d'événements zombies ou de nœuds DOM ici. C'était un peu surprenant pour moi - je ne suis pas un expert en interne de jQuery et je m'attendais à avoir encore les gestionnaires d'événements des nœuds enfants au moins. Mais je suppose que parce que mes sous-vues sont toutes contenues dans la vue parent, qui était toujours en train d'être supprimée et déliée, jQuery efface bien tous les enfants. J'ai donc arrêté de délier l'élément parent :

Backbone.View.prototype.close = function(){
    var ctx = this;
    _.each(ctx.subViews(), function(view) {
        //view.close();
    });
    this.remove();
    //this.unbind();
}

Le nombre de mes gestionnaires d'événements dans l'inspecteur de Chrome n'a toujours pas augmenté.

Donc mes questions sont :

Quel est l'exemple "réel" d'une situation dans laquelle vous devez gérer intelligemment le déverrouillage des événements et les sous-vues de cette manière ? S'agit-il de toute référence d'objet en dehors de la portée immédiate de votre vue ? Est-ce seulement si vos sous-vues ne sont pas contenues par le $el de la vue parent ?

Answer 1

Lorsque vous supprimez une vue parent du DOM, jQuery nettoie tous les événements DOM qui ont été accrochés dans les enfants. unbind() est un alias de la fonction Events.off ce qui supprime tous les événements que vous avez pu connecter en utilisant la fonction myChildView.on('someEvent', ...) . Par exemple, une vue parent peut écouter un événement que vous déclenchez dans une vue enfant. Dans ce cas, vous auriez besoin de l'appel à this.unbind() ou this.off() .

Maintenant que Backbone.Events (à partir de 0.9.9) a listenTo() y stopListening() vous pouvez envisager d'ajouter this.stopListening() à votre close() . Alors si, dans votre optique, vous avez utilisé quelque chose comme this.listenTo(this.model, ...) ils seraient également nettoyés correctement.