Update: I am updating the question with the answer of Sushanth --, I have faced some troubles prevent the code from run successfully [the latest update of my code in the question below after this quote "Latest Update" & the issues below it]
I am developing an Backbone.js application and I am stuck with getting data from the server.
http://localhost:8888/client/i/schedule
This url represents json array of the required data, the problem here is how could i make the view read this data from the collections and model
There is 3 files below:
The first one is for the view
// Filename: views/schedule
define([
'jquery',
'underscore',
'backbone',
'collections/schedule',
'text!templates/schedule.html'
], function($, _, Backbone, scheduleCollection, scheduleTemplate) {
var scheduleView = Backbone.View.extend({
el: $(".app"),
initialize: function() {},
render: function() {
console.log('schedule view loaded successfully');
}
});
return new scheduleView;
});
The second one is for the collection
// Filename: collections/schedule
define([
'jquery',
'underscore',
'backbone',
'models/schedule'
], function($, _, Backbone, ScheduleModel){
var ScheduleCollection = Backbone.Collection.extend({
model: ScheduleModel,
initialize: function(){
console.log('schedule collections loaded successfully');
}
});
return new ScheduleCollection;
});
the first one is for the model
// Filename: models/schedule
define([
'underscore',
'backbone',
'config'
], function(_, Backbone, config) {
var ScheduleModel = Backbone.Model.extend({
urlRoot: "http://localhost:8888/client/i/schedule",
defaults: {
feedback: 'N/A'
},
initialize: function(){
console.log('schedule model loaded successfully');
}
});
return ScheduleModel;
});
Update
The router
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'schedule': 'scheduleRoute',
// Default
'*actions': 'defaultRoute'
},
scheduleRoute: function() {
scheduleView.render();
},
)}
Latest Update
The router.js
define([
'jquery',
'underscore',
'backbone',
'app/views/dashboard',
'app/views/schedule'
], function($, _, Backbone, dashboardView, scheduleView) {
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 schedules = new Schedules();
// Pass in the collection as the view expects it
var scheduleView = new ScheduleView({
collection: schedules
});
// 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 schedule view .js
// Filename: views/schedule
define([
'jquery',
'underscore',
'backbone',
'app/collections/schedule',
'text!templates/schedule.html'
], function ($, _, Backbone, scheduleCollection, scheduleTemplate) {
var scheduleView = Backbone.View.extend({
collection: scheduleCollection,
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);
}
});
return new scheduleView;
});
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 schedule 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;
});
Issue code not run as expected and console log me the error below
Uncaught TypeError: Cannot read property '_listenerId' of undefined
Update the answer was that i miss to return a value from the ScheduleView.js
Backbone.js is not a constructor error when create instance of view