javascript 创建视图实例时，Backbone.js 不是构造函数错误

Backbone.js is not a constructor error when create instance of view

提问by ahmedsaber111

I am a new user to backbone.js and testing how could i work around with it, the last few days i was testing how could i use route to change view data via a collection.

我是backbone.js 的新用户，正在测试如何使用它，最近几天我正在测试如何使用路由通过集合更改视图数据。

In the current situation i was stuck with an issue that when i am trying to create an instance of ScheduleView in the router.js the console log this error message:

在当前情况下，我遇到了一个问题，即当我尝试在 router.js 中创建 ScheduleView 实例时，控制台会记录此错误消息：

TypeError: ScheduleView is not a constructor

Below code of the three pages of schedule module {view, collection, model} + the router.js

下面schedule模块{view, collection, model}三页代码+router.js

The router

路由器

// Filename: router.js
define([
    'jquery',    
    'underscore',
    'backbone',
    'app/views/schedule',
    'app/collections/schedule'
], function($, _, Backbone, ScheduleView, ScheduleCollection) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            // Define some URL routes
            'schedule': 'scheduleRoute',
            // Default
            '*actions': 'defaultRoute'
        },
        scheduleRoute: function() {
            // Create a new instance of the collection
            // You need to set the url in the collection as well to hit the server
            var schedulecollection = new ScheduleCollection();
            // Pass in the collection as the view expects it
            console.log(typeof(ScheduleView));
            var scheduleview = new ScheduleView({
                collection: schedulecollection
            });            
           // No need of calling render here
           // as the render is hooked up to the reset event on collection          
        },
        defaultRoute: function(actions) {            
            // We have no matching route, lets display the home page
            //DashboardView.render();
        }
    });

    var initialize = function() {                
        var app_router = new AppRouter;
        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

The View

风景

// Filename: views/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'app/collections/schedule',
    'text!templates/schedule.html'
], function ($, _, Backbone, ScheduleCollection, ScheduleTemplate) {

    var scheduleView = Backbone.View.extend({        
        el: $(".app"),
        initialize: function () {
            // Listen to the reset event which would call render
            this.listenTo(this.collection, 'reset', this.render);
            // Fetch the collection that will populate the collection
            // with the response 
            this.collection.fetch();
        },
        render: function () {
            //console.log('schedule view loaded successfully');  
            console.log(this.collection);
        }
    });        
});

The collection

集合

// Filename: collections/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'app/models/schedule'
], function ($, _, Backbone, ScheduleModel) {
    var ScheduleCollection = Backbone.Collection.extend({
        model: ScheduleModel,
        url: "http://sam-client:8888/sam-client/i/schedule",
        initialize: function () {
            //console.log('schedule collections loaded successfully');
        }
    });
    return ScheduleCollection;
});

The Model

该模型

// Filename: models/schedule
define([
    'underscore',
    'backbone',
    'app/config'], function (_, Backbone, Config) {
    var ScheduleModel = Backbone.Model.extend({
        // If you have any
        //idAttribute : 'someId'
        // You can leave this as is if you set the idAttribute
        // which would be apprnded directly to the url
        urlRoot: "http://sam-client:8888/sam-client/i/schedule",
        defaults: {
            feedback: 'N/A'
        },
        initialize: function () {
            console.log('schedule model loaded successfully');
        }
    });
    return ScheduleModel;

});

回答by Bergi

Looks like your ScheduleViewis undefined - you didn't export anything from the module. You seem to have forgotten the line

看起来您ScheduleView未定义 - 您没有从模块中导出任何内容。你好像忘记了线路

return scheduleView;

回答by Tomer

You defined ScheduleViewmodel but you forgot to return it:

您定义了ScheduleView模型，但忘记返回它：

// Filename: views/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'app/collections/schedule',
    'text!templates/schedule.html'
], function ($, _, Backbone, ScheduleCollection, ScheduleTemplate) {

    var scheduleView = Backbone.View.extend({        
        el: $(".app"),
        initialize: function () {
            // Listen to the reset event which would call render
            this.listenTo(this.collection, 'reset', this.render);
            // Fetch the collection that will populate the collection
            // with the response 
            this.collection.fetch();
        },
        render: function () {
            //console.log('schedule view loaded successfully');  
            console.log(this.collection);
        }
    });   
     /****** ADD THIS *****/
     return scheduleView;      
});