當創建視圖的實例時，Backbone.js不是構造函數錯誤

Question

我是backbone.js的新用戶，測試如何解決這個問題，最近幾天我測試瞭如何使用路徑來更改視圖數據通過集合。

在目前的情況下，我被套牢的一個問題是，當我試圖在router.js創建ScheduleView的實例控制檯登錄此錯誤消息：

TypeError: ScheduleView is not a constructor 

以下三個頁面的代碼時間表模塊{視圖，收集，模型} +的router.js

路由器的

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

觀

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

收集

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

示範

// 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

看起來你ScheduleView未定義 - 你沒有從模塊輸出任何東西。你似乎已經忘記了線

return scheduleView; 

Answer 2

您定義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;  
});