Comment changer de vue avec le routeur backbone.js?

Il s'agit plus d'une question conceptuelle, en termes d'utilisation du routeur de backbone et de rendu des vues dans l'épine dorsale.

Pour l'exemple d'un exemple (ce dont je développe pour apprendre cela) J'ai une application CRUD de base pour les contacts, avec la création d'un formulaire, une liste de tous les contacts, une vue unique de contact et un formulaire d'édition.

Pour des raisons de simplicité, je dirai que je voudrais seulement voir une de ces choses à la fois. De toute évidence, les afficher et les cacher avec jQuery serait trivial, mais ce n'est pas ce que je souhaite.

J'ai deux idées,

• Quelle est la différence entre $ el et el dans les vues Backbone.js?
• Backbone JS: peut-on voir les mises à jour de déclenchement dans d'autres vues?
• Backbone.View "el" confusion

1) déclenche des événements personnalisés à partir de mon routeur qui supprime toutes les vues et envoie des événements qui pourraient être écoutés dans toutes les vues (déclenchant une méthode de fermeture) et une vue principale de l'application qui instancie une vue spécifique – c.-à-d.

App.Router = Backbone.Router.extend({ routes: { '' : 'index', 'addnew' : 'addNew', 'contacts/:id' : 'singleContact', 'contacts/:id/edit' : 'editContact' }, index: function(){ vent.trigger('contactR:closeAll'); vent.trigger('contactR:index'); }, addNew: function() { vent.trigger('contactR:closeAll'); vent.trigger('contactR:addNew'); }, singleContact: function(id) { vent.trigger('contactR:closeAll'); vent.trigger('contactR:singleContact', id); }, editContact: function(id) { vent.trigger('contactR:closeAll'); vent.trigger('contactR:editContact', id); }, }); 

(Nb: l'évent est l'extension des événements backbone obj afin que je puisse pub / sub)

2) ou devrais-je / devrais-je envoyer un événement proche de tout et créer une instance de la vue dans le routeur?

Notez que je cherche à y parvenir sans approfondir les bibliothèques ou cadres supplémentaires comme la marionnette, etc.

 var ViewManager = { currentView : null, showView : function(view) { if (this.currentView !== null && this.currentView.cid != view.cid) { this.currentView.remove(); } this.currentView = view; return view.render(); } } 

 App.Router = Backbone.Router.extend({ routes: { '' : 'index', 'addnew' : 'addNew', 'contacts/:id' : 'singleContact', 'contacts/:id/edit' : 'editContact' }, index: function(){ var indexView ... ViewManager.showView(indexView); }, addNew: function() { var addNewView ... ViewManager.showView(addNewView); }, singleContact: function(id) { var singleContactView ... ViewManager.showView(singleContactView); }, editContact: function(id) { var editContactView ... ViewManager.showView(editContactView); }, });