從服務器獲取數據Backbone.js應用程序

Question

更新：我用Sushanth的答案更新問題 - ，我遇到了一些麻煩，防止代碼成功運行[在下面的問題中我的代碼的最新更新後此引用「最新更新」&下面的問題]

我正在開發一個Backbone.js應用程序，我堅持從服務器獲取數據。

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

這url表示所需要的數據的JSON數組，這裏的問題是我如何才能讓視圖讀取集合這些數據和模型

有以下3個文件：

第一種是用於視圖

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

第二個是用於收集

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

第一個是模型

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

}); 

更新

路由器

var AppRouter = Backbone.Router.extend({ 
     routes: { 
      // Define some URL routes 
      'schedule': 'scheduleRoute', 
      // Default 
      '*actions': 'defaultRoute' 
     }, 
     scheduleRoute: function() { 

      scheduleView.render(); 
     }, 

)} 

最新

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

時間表視圖.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; 
}); 

收集

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

}); 

問題 代碼無法按預期運行，控制檯登錄我的錯誤以下

Uncaught TypeError: Cannot read property '_listenerId' of undefined 

更新 的回答是，我想念返回從一個值ScheduleView.js

Backbone.js is not a constructor error when create instance of view

Answer 1

您需要聆聽有關視圖集合上的reset事件。

然後使用fetch發送請求。

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

爲了減少混淆，從模塊返回Backbone View，Model或Collection來代替新的實例。

所以當你定義模塊時，你可以創建一個新的實例。

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

和模塊在要在視圖中添加作爲依賴

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

UPDATE

模式

// Filename: models/schedule 
define([ 
    'underscore', 
    'backbone', 
    '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://localhost:8888/client/i/schedule", 
     defaults: { 
      feedback: 'N/A' 
     }, 
     initialize: function() { 
      console.log('schedule model loaded successfully'); 
     } 
    }); 
    return ScheduleModel; 

}); 

科爾撓度

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

視圖

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

在其他一些模塊，

你將需要的意見，要渲染

路由器

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