2012-09-17 21 views
12

Necesito establecer inicialmente una plantilla de vista de Backbone en función de si la fecha que un usuario ha seleccionado está en el pasado o futuro, así como cambiarla más tarde cuando su colección cambia datos de una fecha diferente. ¿Cómo hago esto? Pensé que sería capaz de configurar la plantilla para una función que devuelve la cadena de selector correcta en función de si estoy en el pasado o no, pero esto no funciona.Backbone dinámicamente cambiar plantillas

pR.views.ScheduleJobView = Backbone.Marionette.ItemView.extend({ 
    tagName: "tr", 
    // NEED A WAY TO SWITCH THIS TOO 
    template: "#schedule-job-template" 
}); 


pR.views.ScheduleJobsView = Backbone.Marionette.CompositeView.extend({ 
    // DOESN'T WORK 
    template: function() { 
     if (this.isPast) 
      return "#schedule-jobs-past-template"; 
     else 
      return "#schedule-jobs-template"; 
    },  itemView: pR.views.ScheduleJobView, 

    itemView: pR.views.ScheduleJobView, 
    itemViewContainer: "tbody", 

    // Defaults for the model's url 
    baseUrl: "/schedules/day/", 
    baseApiUrl: "/api/schedule/day/", 
    // Empty object to store url parameters 
    urlParameters: {}, 

    initialize: function() { 
     pR.vent.bindTo("change:parameters", this.changeUrl, this); 
     this.model.url = this.baseApiUrl; 
    }, 

    onRender: function() { 
     console.log("Rendering Jobs View"); 
    }, 

    // Change the main model's url 
    changeUrl: function (parameters) { 
     // merge new parameters with old ones 
     this.urlParameters = _.extend(this.urlParameters, parameters); 

     var url = ""; 
     var apiUrl = this.baseApiUrl; 

     _.each(this.urlParameters, function (value, parameter) { 
      // Add each parameter segment to the url 
      url = url + parameter + '/' + value + '/'; 
      apiUrl = apiUrl + parameter + '/' + value + '/'; 
     }); 

     this.model.url = apiUrl; 
     console.log("Updated CurrentDay model url to " + apiUrl); 
     this.model.fetch(); 

     console.log("Navigating to " + url); 
     pR.routers.appRouter.navigate(url); 
    }, 

    // Check if we are in the past 
    isPast: function() { 
     var year = this.urlParameters.year; 
     var month = this.urlParameters.month; 
     var day = this.urlParameters.day; 
     var selectedDate = Date(year, month, day); 

     if (selectedDate < Date()){ 
      return true; 
     } else { 
      return false; 
     } 
    } 
}); 

Tenga en cuenta que estoy usando vistas compuestas de marioneta aquí, también, así que necesito una manera de cambiar la plantilla del itemView acuerdo con el calendario también. Definitivamente estoy abierto a abordar esto de otra manera si mi estrategia básica está mal pensada.

Respuesta

16

Está estableciendo this.template a un método, y Marionette está buscando un valor de cadena.

Probablemente pueda salirse con la suya usando la misma lógica pero poniéndola en su método initialize.

pR.views.ScheduleJobsView = Backbone.Marionette.CompositeView.extend({ 
    template: null, 
    [ ... ] 
    initialize: function() { 
     if (this.isPast) { 
      this.template = "#schedule-jobs-past-template"; 
     } else { 
      this.template = "#schedule-jobs-template"; 
     } 
+0

fresca, que funciona! Pensé que había intentado algo como esto, pero debo haber hecho algo mal. ¿Tiene alguna forma de establecer la plantilla de itemView en función del marco de tiempo también? –

+1

Solo una nota: Marionette solía aceptar una función para una plantilla que devolvería un selector dinámico. Ahora la función que acepta se usa como la función de plantilla compilada. – jsoverson

+2

funcionó para mí. También puede hacer esto en otra función y llamar a this.render() luego y cambiará la plantilla. ¡Cosas divertidas! –

Cuestiones relacionadas