Backbone.js is not a constructor error when instantiating a view

Question

I am a new user of backbone.js and testing how I can work with him, in the last few days I have tested how to use the route to change the viewing data through the collection.

In the current situation, I had a problem with the fact that when I try to create an instance of ScheduleView in router.js, the console will log this error message:

TypeError: ScheduleView is not a constructor 

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

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 }; }); 

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); } }); }); 

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; }); 

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; }); 

Answer 1

It looks like your ScheduleView undefined - you did not export anything from the module. It seems you forgot the line

 return scheduleView; 

Answer 2

You defined the ScheduleView model, but you forgot to return it:

 // 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; });