2012-09-04 26 views
9

Necesito crear una vista base que extienda todas mis vistas. No estoy seguro de dónde y cuándo declarar esta vista.¿Cómo crear una vista base en backbone.js?

Básicamente, necesito inyectar global variables en todas mis plantillas y no hago eso en todos y cada uno de los métodos render().

esta es mi estructura de árbol por ahora:

|-main.js 
|-app.js 
|-require.js 
|-App 
| |-View 
| | |-Dashboard.js 
| | |-Header.js 
| | |-Content.js 
| |-Model 
| |-Collection 
| |-Template 
| 
|-Libs 
    |-... 

esto es mis app.js

var App = { 
    ApiURL: "http://domain.local", 
    View: {}, 
    Model: {}, 
    Collection: {}, 
    Registry: {}, 
    Router: null 
}; 

define(['backbone', 'View/Dashboard'], function(Backbone){ 
    var AppRouter = Backbone.Router.extend({ 
     routes : { 
      "dashboard": "index", 
     }, 

     index: function() { 
      console.log('routing index route...'); 
      var x = new App.View.Dashboard({el:$('#main-content'), type:'other'}); 
     } 
    }); 

    var initialize = function() { 
     App.Router = new AppRouter; 
     Backbone.history.start({pushState: true}); 
     console.log('Backbone is running...'); 
    }; 

    return { 
     initialize : initialize 
    }; 
}); 

Y por ahora toda mi vista heredan de Backbone.View así:

App.View.Dashboard = Backbone.View.extend({ 

Quiero crear mi propio Base View que todas las vistas de la aplicación ld extiende. Esto es lo que he hecho hasta ahora, pero no sé dónde colocar este fragmento de código porque en app.js estoy cargando la vista del Tablero, así que tengo que hacerlo antes pero necesito solicitar esta base vista del objeto en todos los puntos de vista ... así que estoy perdido :(

define(['backbone', 'underscore', 'twig'], function(Backbone, _){ 

    App.View.Base = Backbone.View.extend({}); 
    _.extends(App.View.Base.prototype, { 
     initialize: function(params) 
     { 
      this.el = params.el; 
      this.init(params); 
     }, 

     init: function(params) 
     { 
     }, 

     renderTemplate:function(template_path, data) 
     { 
      var tpl = twig({href:template_path, async:false}); 

      // Inject variables 
      data.user = App.Registry.User; 
      data.account = App.Registry.Account; 

      return tpl.render(data); 
     } 
    }); 

}); 

Cualquier idea o comentarios son bienvenidos Una respuesta sería la mejor:. D

Gracias, Maxime

Respuesta

11
App.View.Base = Backbone.View.extend({ 
    baseMethod: function(params) {}; 
}); 

App.ExtendedView.Base = App.View.Base.extend({ 
    // new stuff here 

    // overriding App.View.Base.baseMethod 
    baseMethod: function(params) { 
    // overriding stuff here 
    App.View.Base.prototype.baseMethod.call(this, params); // calling super.baseMethod() 
    } 
}); 
.
+0

Terminé haciéndolo de otra manera pero esta respuesta parece ser la mejor para mi pregunta;) – maxwell2022

Cuestiones relacionadas