Backbone JS: Comment nettoyer les vues lors de la navigation vers une autre URL?

J'ai un Homeview qui contient quelques-uns des sous-vues sur la page, quand j'ai accédez à une autre page en utilisant le routeur, comment puis-je nettoyer les vues existantes, et de créer de nouveaux points de vue pour la page, je veux naviguer?

Cette application n'a pas de modèle, de collections, juste des points de vue.

Merci!

Partie du code:

Home = Backbone.View.extend({
    template: "static/js/templates/home.html",

    initialize: function() {
      _.bindAll(this);
      this.render();
    },

    render: function() {
      var view = this;

      //Fetch the template, render it to the View element and call done.
      namespace.fetchTemplate(this.template, function(tmpl) {
        view.el.innerHTML=tmpl();
        view.subRender();
      });

      return this;
    },
    subRender: function() {
      var view = this;
      var videoView = new Subview1({
        el: $('#wrapper1'),
        homeView: view
      });
      var timeView = new Subview2({
        el: $("#wrapper2")
      });
    }
 });

source d'informationauteur user469652

  1. 9

    Vous pourriez probablement utiliser simplement épine dorsale des événements du mécanisme pour ce faire, si vous le souhaitez.

    Vous auriez juste besoin de créer un événement mondial routeur, puis demandez à chacun de vos points de vue à écouter un CloseView événement. Ensuite, vous avez juste besoin d'effectuer tous vos arrêt sur la réception de la CloseView événement.

    var dispatcher = _.clone(Backbone.Events)

Home = Backbone.View.extend({
    ...
    initialize: function() {
        ...
        dispatcher.on( 'CloseView', this.close, this );
    }
    close: function() {
        //Unregister for event to stop memory leak
        dispatcher.off( 'CloseView', this.close, this );
        this.remove();
        this.unbind();
        this.views = [];   //Clear the view array
    }
    ...
});

SubView = Backbone.View.extend({
    ...
    initialize: function() {
        ...
        dispatcher.on( 'CloseView', this.close, this );
    }
    close: function() {
        //Unregister for event to stop memory leak
        dispatcher.off( 'CloseView', this.close, this );
        //Do other close stuff here.
    }
});

    Alors c'est juste une affaire de l'appel dispatcher.trigger( 'OnClose' ) dans votre routeur/ailleurs pour déclencher la fermeture de fonctions.

    Comme un raccourci, en supposant que vous voulez l'exécuter cet arrêt sur chaque navigation, vous avez juste à vous inscrire à des événements sur le routeur (soit une "OnClose" événement comme ici, ou le "tout" de l'événement pour obtenir juste chaque navigation) mais vous devez être prudent que les événements ont été appelés dans l'ordre que vous attendiez.

    Il faudrait aussi probablement possible de revoir certaines de ce code dans la colonne vertébrale.Vue.prototype ou similaire, mais je vais laisser cela pour quelqu'un d'autre pour le faire.

  2. 4

    - Je stocker les sous-vues dans un tableau et quand je ferme un "parent"-vue, via le point de vue de l' close() fonction, parcourir le tableau et fermer le sous-vues.

    Cela nécessite Subview1 et Subview2 avoir close() fonctions ainsi.

    Home = Backbone.View.extend({
    template: "static/js/templates/home.html",

    initialize: function() {
      _.bindAll(this);
      this.render();
      //Hold sub views
      this.views = [];
    },
    close: function() {
      this.remove();
      this.unbind();
      this.clear_views();
    },
    clear_views: function() {
      while this.views.length > 0
        this.views[0].close()
        this.views.splice(0, 1)
    },
    render: function() {
      var view = this;

      //Fetch the template, render it to the View element and call done.
      namespace.fetchTemplate(this.template, function(tmpl) {
        view.el.innerHTML=tmpl();
        view.subRender();
      });

      return this;
    },
    subRender: function() {
      var view = this;
      var videoView = new Subview1({
        el: $('#wrapper1'),
        homeView: view
      });
      this.views.push(videoView);
      var timeView = new Subview2({
        el: $("#wrapper2")
      });
      this.views.push(timeView);
    }
 });