Backbone.js路由器实例在某种程度上是无效的

我有以下代码块。 它完美地运作。

  $(function() { window.router = new Lunchhub.Routers.RestaurantLocationsRouter({restaurantLocations: }); var Foo = Backbone.Router.extend({routes: {"foo":"bar"}}); r = new Foo(); Backbone.history.start(); });  

但是，这不起作用：

 
  $(function() { window.router = new Lunchhub.Routers.RestaurantLocationsRouter({restaurantLocations: }); // All I did was delete the two lines that used to be here Backbone.history.start(); });  

后一个片段给了我这个错误：

 Uncaught TypeError: Cannot call method 'start' of undefined 

所以我的Foo路由器实例触发了Backbone.history的正确初始化，就像你期望路由器实例那样，但是我的Lunchhub.Routers.RestaurantLocationsRouter实例没有。

这是我在CoffeeScript中的路由器定义（由backbone-rails gem自动生成）：

 class Lunchhub.Routers.RestaurantLocationsRouter extends Backbone.Router initialize: (options) -> @restaurantLocations = new Lunchhub.Collections.RestaurantLocationsCollection() @restaurantLocations.reset options.restaurantLocations routes: "new" : "newRestaurantLocation" "index" : "index" ":id/edit" : "edit" ":id" : "show" ".*" : "index" newRestaurantLocation: -> @view = new Lunchhub.Views.RestaurantLocations.NewView(collection: @restaurant_locations) $("#restaurant_locations").html(@view.render().el) index: -> @view = new Lunchhub.Views.RestaurantLocations.IndexView(restaurant_locations: @restaurant_locations) $("#restaurant_locations").html(@view.render().el) show: (id) -> restaurant_location = @restaurant_locations.get(id) @view = new Lunchhub.Views.RestaurantLocations.ShowView(model: restaurant_location) $("#restaurant_locations").html(@view.render().el) edit: (id) -> restaurant_location = @restaurant_locations.get(id) @view = new Lunchhub.Views.RestaurantLocations.EditView(model: restaurant_location) $("#restaurant_locations").html(@view.render().el) 

这是编译的JavaScript：

 (function() { var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }; Lunchhub.Routers.RestaurantLocationsRouter = (function(_super) { __extends(RestaurantLocationsRouter, _super); function RestaurantLocationsRouter() { RestaurantLocationsRouter.__super__.constructor.apply(this, arguments); } RestaurantLocationsRouter.prototype.initialize = function(options) { this.restaurantLocations = new Lunchhub.Collections.RestaurantLocationsCollection(); return this.restaurantLocations.reset(options.restaurantLocations); }; RestaurantLocationsRouter.prototype.routes = { "new": "newRestaurantLocation", "index": "index", ":id/edit": "edit", ":id": "show", ".*": "index" }; RestaurantLocationsRouter.prototype.newRestaurantLocation = function() { this.view = new Lunchhub.Views.RestaurantLocations.NewView({ collection: this.restaurant_locations }); return $("#restaurant_locations").html(this.view.render().el); }; RestaurantLocationsRouter.prototype.index = function() { this.view = new Lunchhub.Views.RestaurantLocations.IndexView({ restaurant_locations: this.restaurant_locations }); return $("#restaurant_locations").html(this.view.render().el); }; RestaurantLocationsRouter.prototype.show = function(id) { var restaurant_location; restaurant_location = this.restaurant_locations.get(id); this.view = new Lunchhub.Views.RestaurantLocations.ShowView({ model: restaurant_location }); return $("#restaurant_locations").html(this.view.render().el); }; RestaurantLocationsRouter.prototype.edit = function(id) { var restaurant_location; restaurant_location = this.restaurant_locations.get(id); this.view = new Lunchhub.Views.RestaurantLocations.EditView({ model: restaurant_location }); return $("#restaurant_locations").html(this.view.render().el); }; return RestaurantLocationsRouter; })(Backbone.Router); }).call(this); 

这可能会出错？

编辑 ：我已经找到了部分问题。 在CoffeeScript中，它在一些应该使用restaurant_locations的地方使用了restaurantLocations 。 我现在遇到一个奇怪的问题，但可能更简单：当我将编译后的JavaScript直接复制并粘贴到区域时，就在window.router =赋值之前，一切都运行得很好。 但是，当我尝试使用已编译的JS作为外部文件（我知道它被包含 – 我检查过）时，我得到了相同的Cannot call method 'start' of undefined错误的Cannot call method 'start' of undefined 。

这是我更新的CoffeeScript：

 class Lunchhub.Routers.RestaurantLocationsRouter extends Backbone.Router initialize: (options) -> @restaurantLocations = new Lunchhub.Collections.RestaurantLocationsCollection() @restaurantLocations.reset options.restaurantLocations routes: "new" : "newRestaurantLocation" "index" : "index" ":id/edit" : "edit" ":id" : "show" ".*" : "index" newRestaurantLocation: -> @view = new Lunchhub.Views.RestaurantLocations.NewView(collection: @restaurantLocations) $("#restaurant_locations").html(@view.render().el) index: -> @view = new Lunchhub.Views.RestaurantLocations.IndexView(restaurantLocations: @restaurantLocations) $("#restaurant_locations").html(@view.render().el) show: (id) -> restaurant_location = @restaurantLocations.get(id) @view = new Lunchhub.Views.RestaurantLocations.ShowView(model: restaurant_location) $("#restaurant_locations").html(@view.render().el) edit: (id) -> restaurant_location = @restaurantLocations.get(id) @view = new Lunchhub.Views.RestaurantLocations.EditView(model: restaurant_location) $("#restaurant_locations").html(@view.render().el) 

这是我更新的编译JavaScript：

 (function() { var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }; Lunchhub.Routers.RestaurantLocationsRouter = (function(_super) { __extends(RestaurantLocationsRouter, _super); function RestaurantLocationsRouter() { RestaurantLocationsRouter.__super__.constructor.apply(this, arguments); } RestaurantLocationsRouter.prototype.initialize = function(options) { this.restaurantLocations = new Lunchhub.Collections.RestaurantLocationsCollection(); return this.restaurantLocations.reset(options.restaurantLocations); }; RestaurantLocationsRouter.prototype.routes = { "new": "newRestaurantLocation", "index": "index", ":id/edit": "edit", ":id": "show", ".*": "index" }; RestaurantLocationsRouter.prototype.newRestaurantLocation = function() { this.view = new Lunchhub.Views.RestaurantLocations.NewView({ collection: this.restaurantLocations }); return $("#restaurant_locations").html(this.view.render().el); }; RestaurantLocationsRouter.prototype.index = function() { this.view = new Lunchhub.Views.RestaurantLocations.IndexView({ restaurantLocations: this.restaurantLocations }); return $("#restaurant_locations").html(this.view.render().el); }; RestaurantLocationsRouter.prototype.show = function(id) { var restaurant_location; restaurant_location = this.restaurantLocations.get(id); this.view = new Lunchhub.Views.RestaurantLocations.ShowView({ model: restaurant_location }); return $("#restaurant_locations").html(this.view.render().el); }; RestaurantLocationsRouter.prototype.edit = function(id) { var restaurant_location; restaurant_location = this.restaurantLocations.get(id); this.view = new Lunchhub.Views.RestaurantLocations.EditView({ model: restaurant_location }); return $("#restaurant_locations").html(this.view.render().el); }; return RestaurantLocationsRouter; })(Backbone.Router); }).call(this); 

Answer 1

好吧，这结果是一个非常深奥的问题。 我有一个剩余的backbone-min.js坐在我的app/assets/javascripts目录中，即使我已经切换到使用不同的Backbone文件。 在我的路线定义之后，这个“旧”的backbone-min.js被加载了，这就是弄乱的东西。 删除backbone-min.js ，事情就开始了。