Append JQuery with backbone

Question

I'm working with Backbone and Dyson for simulate a API. I'm trying show the results of the JSON but I have the error: Uncaught TypeError: self.template is not a function.

ReservaCollectionView = Backbone.View.extend({
initialize: function () {
    if (Session.get('authenticated') && Session.get('authenticated') !== false) {
        this.template = _.template($('#divReservaTpl').html(), {});

        //Vector donde almacenamos las subvistas que corresponden a las reservas
        this.subViewsReservas = [];
        //Instancia de la vista de la paginación
        this.paginacionVista = new PaginacionReservasView({
            collection: this.collection,
            el: '.paginacionReservas',
            reservasPagina: 5,
        });
        //Instancia de la vista del buscador (simulamando los datos del servidor que corresponden a la colección oficinas )
        this.buscadorVista = new BuscadorView({
            el: 'div.buscador-reservas',
            collection: new OficinasCollection(oficinas),
        });
    }
    else {
    }
},
render: function () {
    var self = this;
    //var fragment = document.createDocumentFragment();
    self.$('.contenedor-reservas').empty();
    self.collection.each(function (reserva, index) {
      console.log(reserva);
      console.log(index);

        self.$('.contenedor-reservas').append(self.template({'data': reserva.toJSON()}));

    });

    this.collection.each(function (reserva, index) {
        self.subViewsReservas.push(new ReservaView({
            el: '#' + reserva.get('Idreserva'),
            model: reserva
        }));
    });


    this.collection.each(function (reserva, index) {
        //Limite de la paginacion 5 limite arbitrario
        if (index < 5) {
            //Lo Marcamos como visible y actualiazamos la paginación
            self.collection.get(reserva.get('Idreserva')).set({'Visibilidad': true});
        }
    });

    this.paginacionVista.render();

    return this;
},

});

Value of the reservaJSON():

{"Idreserva":"1","Idcliente":403,"Idtarifa":3,"Idgrupo":3,"Bono":"WG5000218E","BonoAgencia":"7741124","Fecha":"2015-02-17 11:49:09","Dropoffdate":"2015-02-17 11:49:09","Pickupdate":"2015-02-17 11:49:09","Grupo":"XXX","reserva_status":3,"Estado":3,"status":true}

Answer 1

One scenario where this could occur is when the condition

if (Session.get('authenticated') && Session.get('authenticated') !== false) 

fails.

In such case, this.template = _.template($('#divReservaTpl').html(), {}); won't execute and template property won't be present in view.

I suggest having the template property in the view definition itself as suggested in the documentation:

ReservaCollectionView = Backbone.View.extend({
 initialize: function () 
 },
 template: _.template($('#divReservaTpl').html()),
 render: function(){}
});

You can then choose whether to render the view or not based on conditions safely.

Another scenario in which this error might occur is when the context in which render method executed (this) refers to something else other than the view.