javascript - get data from server Backbone.js application -

update: updating question answer of sushanth --, have faced troubles prevent code run [the latest update of code in question below after quote "latest update" & issues below it]

i developing backbone.js application , stuck getting data server.

http://localhost:8888/client/i/schedule 

this url represents json array of required data, problem here how make view read data collections , model

there 3 files below:

the first 1 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 1 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 1 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 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 url routes             'schedule': 'scheduleroute',             // default             '*actions': 'defaultroute'         },         scheduleroute: function() {             // create new instance of collection             // need set url in collection hit server             var schedules = new schedules();             // pass in collection view expects             var scheduleview = new scheduleview({                 collection: schedules             });            // no need of calling render here            // render hooked reset event on collection                   },         defaultroute: function(actions) {                         // have no matching route, lets display 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 reset event call render             this.listento(this.collection, 'reset', this.render);             // fetch collection populate collection             // 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 have         //idattribute : 'someid'         // can leave if set idattribute         // apprnded directly 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 expected , console log me error below

uncaught typeerror: cannot read property '_listenerid' of undefined  

update answer miss return value scheduleview.js

backbone.js not constructor error when create instance of view

you need listen reset event on collection view in question.

then use fetch send in request.

var scheduleview = backbone.view.extend({      el: $(".app"),     initialize: function() {        // listen reset event call render        this.listento(this.collection, 'reset', this.render);        // fetch collection populate collection        // response         this.collection.fetch();     },     render: function() {                      console.log('schedule view loaded successfully');         console.log(this.collection)     } }); 

and reduce confusion return backbone view,model or collection instead of new instance module.

so when define module, can create new instance.

// 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 scheduleview;     // remove returning of new module here }); 

and in module want add view dependency

// create new instance of collection // need set url in collection hit server var schedules = new schedules();  // pass in collection view expects var scheduleview = new scheduleview({     collection :  }) 

update

model

// filename: models/schedule define([     'underscore',     'backbone',     'config'], function (_, backbone, config) {     var schedulemodel = backbone.model.extend({         // if have         //idattribute : 'someid'         // can leave if set idattribute         // apprnded directly url         urlroot: "http://localhost:8888/client/i/schedule",         defaults: {             feedback: 'n/a'         },         initialize: function () {             console.log('schedule model loaded successfully');         }     });     return schedulemodel;  }); 

collection

// filename: collections/schedule define([     'jquery',     'underscore',     'backbone',     'models/schedule'], function ($, _, backbone, schedulemodel) {     var schedulecollection = backbone.collection.extend({         model: schedulemodel,         url: "http://localhost:8888/client/i/schedule",         initialize: function () {             console.log('schedule collections loaded successfully');         }     });     return schedulecollection; }); 

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 () {             // listen reset event call render             this.listento(this.collection, 'reset', this.render);             // fetch collection populate collection             // response              this.collection.fetch();         },         render: function () {             console.log('schedule view loaded successfully');             console.log(this.collection)         }     }); }); 

in other module,

you require the views, want render

router

var approuter = backbone.router.extend({     routes: {         // define url routes         'schedule': 'scheduleroute',         // default         '*actions': 'defaultroute'     },     scheduleroute: function () {         // create new instance of collection         // need set url in collection hit server         var schedules = new schedules();         // pass in collection view expects         var scheduleview = new scheduleview({             collection: schedules         });        // no need of calling render here        // render hooked reset event on collection      } });