¿Cómo comprobar si la vista de barra lateral ya se ha renderizado en la red troncal?

En general, el usuario ingresa al sitio web a través de la página de inicio y luego represento la vista de la barra lateral allí. A continuación, el usuario hace clic en un enlace y el enrutador representa otra vista y reemplaza la vista de contenido original. La vista de la barra lateral no se vuelve a representar.

Cuando el usuario hace clic en actualizar mientras está en una subpágina, la barra lateral no se procesa.

¿Cómo verifico si una vista existe y se ha renderizado?

Divide las responsabilidades y apégate a ellas. No ponga la representación de la barra lateral en las manos de la vista de la página de inicio.

Podría tener una vista de diseño que maneje la representación del contenido , encabezado , pie de página y barra lateral . Luego, cuando el usuario navega a otra página, el enrutador simplemente llama a algo como setContent(view) en la vista de diseño, lo que garantiza que la barra lateral (y todo lo demás) se haya procesado antes de representar el contenido.

Asumiendo esta plantilla:

  

La vista de diseño podría ser tan simple como:

 var Layout = Backbone.View.extend({ el: 'body' // just for the simple example, let's put this as the body. // This avoids repeating selector strings everywhere in the view code. // If you change a class name in the template, change it only once here. regions: { header: '.header', content: '.content', sidebar: '.sidebar' }, initialize: function(options) { var regions = this.regions; // I like to "namespace" my sub-views into an object. // That way, you still can access them by name, but you can also // loop on the sub-views. this.views = { sidebar: new SideBar({ el: regions.sidebar }), header: new Header({ el: regions.header }), }; this.$content = this.$(regions.content); }, render: function() { _.invoke(this.views, 'render'); return this; }, /** * Set the content to a view. * @param {Backbone.View} view to replace the content with. */ setContent: function(view) { var views = this.views, content = views.content; if (content !== view) { if (content) content.remove(); views.content = content = view; this.$content.html(content.render().el); } }, }); 

Y el enrutador podría crear perezosamente vistas:

 var AppRouter = Backbone.Router.extend({ routes: { '*otherwise': 'homepage', 'specific/:id': 'specificPage' }, initialize: function() { this.layout = new Layout(); this.layout.render(); this.views = {}; }, homepage: function() { // These local variables improve minification and readability. var views = this.views, homepage = views.homepage; if (!homepage) { views.homepage = homepage = new HomePage(); } this.layout.setContent(homepage); }, specificPage: function(id){ var views = this.views, specific = views.specific; if (!specific){ views.specific = specific = new HomePage(); } specific.setId(id); // hypothetical logic this.layout.setContent(specific); } });