ahm*_*111 4 javascript backbone.js
我是backbone.js的新用户,并测试我如何使用它,最近几天我测试了如何使用route来通过集合更改视图数据.
在目前的情况下,我遇到了一个问题,当我试图在router.js中创建一个ScheduleView实例时,控制台会记录以下错误消息:
TypeError: ScheduleView is not a constructor
Run Code Online (Sandbox Code Playgroud)
下面是调度模块{view,collection,model} + 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
};
});
Run Code Online (Sandbox Code Playgroud)
风景
// 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);
}
});
});
Run Code Online (Sandbox Code Playgroud)
这个系列
// 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;
});
Run Code Online (Sandbox Code Playgroud)
该模型
// 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;
});
Run Code Online (Sandbox Code Playgroud)
看起来你ScheduleView
的未定义 - 你没有从模块中导出任何东西.你似乎已经忘记了这条线
return scheduleView;
Run Code Online (Sandbox Code Playgroud)