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.
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:
TypeError: ScheduleView is not a constructor
Below code of the three pages of schedule module {view, collection, model} + the 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;
});
Looks like your ScheduleView
is undefined - you didn't export anything from the module. You seem to have forgotten the line
return scheduleView;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With