Cant seem to render the mainview in backbone.js

Question

I am relatively new in Backbone.js and was trying to build an app for learning. I have used Yeoman backbone generator and while trying to render the mainview, keep getting the error

TypeError: Object [object Object] has no method 'template' 

This is my main.js

 App = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {},
    Adapters:{}

};

$(document).ready(function () {
    'use strict';
    App.routers = new App.Routers.MainRouter();
    Backbone.history.start();

});

This is my MainRouter.js

App.Routers = App.Routers || {};
    'use strict';
    App.Routers.MainRouter = Backbone.Router.extend({
        routes: {
        "": "index",
        "buildings/:id" : "buildingDetails",
        "buildings/:id/map": "map" 
    },

    initialize: function(){
        App.slider = new PageSlider($('body'));
    },

    index: function(){
        if(!App.mainView){  
            App.mainView = new App.Views.MainView();
            console.log(App.mainView)
            App.mainView.render();
             }else {
             App.mainView.delegateEvents();
            }
            App.slider.slidePage(App.mainView.$el);
        },

buildingDetails: function(id){
        var building = new  App.Models.BuildingModel({id: id});
            building.fetch({
            success: function(data){
                var buildingView = new App.Views.BuildingView({model: data});
                App.slider.slidePage(buildingView.render().$el);
            },
            error: function(response){
                console.log(error,'There was some error in accessing data');
            }

        });
    },

This is my BuildingListView.js

App.Views = App.Views || {};
    App.Views.BuildingListView = Backbone.View.extend({
        tagName: 'ul',
        template: JST['app/scripts/templates/BuildingListView.ejs'],
        attributes: {class: 'topcoat-list list'},

        initialize: function(){
            this.model.on("reset", this.render, this);
        },

        render: function(){
            this.$el.empty();
            _.each(this.model.models, function(building){
            App.singleBuildingListView = new App.Views.SingleBuildingListView({model: building});
                console.log(App.singleBuildingListView);
                this.$el.append(App.singleBuildingListView.render().el);
            }, this);
            return this;
        }
    });

    App.Views.SingleBuildingListView = Backbone.View.extend({
        tagName: "li",
        className: "topcoat-list__item",

        initialize: function(){
            this.model.on("change", this.render, this);
            this.model.on("destroy", this.close, this);
        },

        render: function(){
            var html = this.template(this.model.attributes);
            this.$el.html(html);
            return this;
        }
    });

And this is my MainView.js

App.Views = App.Views || {};

    App.Views.MainView = Backbone.View.extend({

        template: JST['app/scripts/templates/MainView.ejs'],

        initialize: function(){
            className: '.scroller',
            this.buildingList = new App.Models.BuildingCollection();
            this.buildingList.fetch({reset: true, data:{name:""}});
            this.buildingListView = new App.Views.BuildingListView({model: this.buildingList});
        },

        render: function(){
            this.$el.html(this.template());
            this.$el.append(this.buildingListView.render().el);
            return this;
        } });

The thing is whenever i navigate to particular building, for e.g. http://localhost:8000/#buildings/1 or http://localhost:8000/#buildings/1/map, everything works fine and even the map is loaded. But whenever I navigate to mainview itself, it doesn't work and I can't seem to figure out why. I think there seems to be problem with mainview but I can't just figure it out. Any help or suggestions on this matter would be much appreciated, thanks. The full code for this app avialabel at https://github.com/khyamay/uopTourGuide.

Answer 1

The SingleBuildingListView uses this.template but you have not specified a template in the view.