似乎无法在backbone.js 中呈现主视图

Question

我在 Backbone.js 方面相对较新，正在尝试构建一个用于学习的应用程序。我使用了 Yeoman 主干生成器，在尝试渲染主视图时，不断收到错误

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

这是我的 main.js

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

};

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

});

这是我的 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');
            }

        });
    },

这是我的 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;
        }
    });

这是我的 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;
        } });

问题是每当我导航到特定建筑物时，例如http://localhost:8000/#buildings/1 或 http://localhost:8000/#buildings/1/map，一切正常，甚至地图也已加载。但是每当我导航到主视图本身时，它就不起作用，我似乎无法弄清楚为什么。我认为mainview似乎有问题，但我无法弄清楚。非常感谢您对此事的任何帮助或建议，谢谢。此应用程序avialabel 的完整代码位于https://github.com/khyamay/uopTourGuide。

Answer 1

SingleBuildingListView 使用了this.template，但您没有在视图中指定模板。