Backbone.js的路由器实例是某种无效 [英] Backbone.js router instance is somehow invalid

问题描述

我有code以下块。它完美的作品。

 ＆LT; D​​IV ID =restaurant_locations＆GT;＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
  $（函数（）{
    window.router =新Lunchhub.Routers.RestaurantLocationsRouter（{restaurantLocations：其中;％= @ restaurant_locations.to_json.html_safe  - ％GT;}）;
    无功富= Backbone.Router.extend（{路线：{foo的栏}}）;
    R =新的Foo（）;
    Backbone.history.start（）;
  }）;
＆LT; / SCRIPT＆GT;
 

但是，这并不工作：​​

 ＆LT; D​​IV ID =restaurant_locations＆GT;＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
  $（函数（）{
    window.router =新Lunchhub.Routers.RestaurantLocationsRouter（{restaurantLocations：其中;％= @ restaurant_locations.to_json.html_safe  - ％GT;}）;
    //我所做的只是删除以前是这里的两行
    Backbone.history.start（）;
  }）;
＆LT; / SCRIPT＆GT;
 

后者片段给我这个错误：

 未捕获类型错误：无法调用的方法未定义'开始'
 

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

下面是在CoffeeScript中我的路由器定义（由骨干护栏宝石自动生成）：

 类Lunchhub.Routers.RestaurantLocationsRouter扩展Backbone.Router
  初始化：（选项） -  GT;
    @restaurantLocations =新Lunchhub.Collections.RestaurantLocationsCollection（）
    @ restaurantLocations.reset opt​​ions.restaurantLocations  路线：
    新：newRestaurantLocation
    指数：指数
    ：ID /编辑：​​编辑
    ：标识：秀
    *：索引  newRestaurantLocation： - ＆GT;
    @view =新Lunchhub.Views.RestaurantLocations.NewView（集合：@restaurant_locations）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）  索引： - ＆GT;
    @view =新Lunchhub.Views.RestaurantLocations.IndexView（restaurant_locations：@restaurant_locations）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）  显示：（ID） -  GT;
    restaurant_location = @ restaurant_locations.get（ID）    @view =新Lunchhub.Views.RestaurantLocations.ShowView（型号：restaurant_location）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）  编辑：（ID） -  GT;
    restaurant_location = @ restaurant_locations.get（ID）    @view =新Lunchhub.Views.RestaurantLocations.EditView（型号：restaurant_location）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）
 

和这里的编译的JavaScript：

 （函数（）{
  VAR __hasProp = Object.prototype.hasOwnProperty，
    __extends =功能（子女，父母）{为（父VAR键）{如果（__hasProp.call（父母，键））子[关键] =父[关键] }功能构造函数（）{this.constructor =小孩; } ctor.prototype = parent.prototype; child.prototype =新的构造函数;孩子.__ super__ = parent.prototype;返回子女; };  Lunchhub.Routers.RestaurantLocationsRouter =（函数（_super）{    __extends（RestaurantLocationsRouter，_super）;    功能RestaurantLocationsRouter（）{
      RestaurantLocationsRouter .__超__ constructor.apply（这一点，参数）。
    }    RestaurantLocationsRouter.prototype.initialize =功能（选件）{
      this.restaurantLocations =新Lunchhub.Collections.RestaurantLocationsCollection（）;
      返回this.restaurantLocations.reset（options.restaurantLocations）;
    };    RestaurantLocationsRouter.prototype.routes = {
      新：newRestaurantLocation，
      指数：指数，
      ：ID /编辑：​​编辑，
      ：标识：秀，
      *：索引
    };    RestaurantLocationsRouter.prototype.newRestaurantLocation =功能（）{
      this.view =新Lunchhub.Views.RestaurantLocations.NewView（{
        集合：this.restaurant_locations
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    RestaurantLocationsRouter.prototype.index =功能（）{
      this.view =新Lunchhub.Views.RestaurantLocations.IndexView（{
        restaurant_locations：this.restaurant_locations
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    RestaurantLocationsRouter.prototype.show =功能（ID）{
      VAR restaurant_location;
      restaurant_location = this.restaurant_locations.get（ID）;
      this.view =新Lunchhub.Views.RestaurantLocations.ShowView（{
        型号：restaurant_location
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    RestaurantLocationsRouter.prototype.edit =功能（ID）{
      VAR restaurant_location;
      restaurant_location = this.restaurant_locations.get（ID）;
      this.view =新Lunchhub.Views.RestaurantLocations.EditView（{
        型号：restaurant_location
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    返回RestaurantLocationsRouter;  }）（Backbone.Router）;}）调用（本）;
 

什么地方出错了怎么回事？

修改：我已经想通了这个问题的一部分。在CoffeeScript的，它是使用 restaurant_locations 在一些地方它应该使用 restaurantLocations 已经在那里。现在我有一个奇怪的问题，但可能更容易之一：当我复制和编译的JavaScript直接粘贴到＆LT;脚本＆GT; 区，<$ C权利之前$ C> window.router = 分配，一切完美的作品。然而，当我尝试使用编译JS作为外部文件（我知道是被列入了 - 我选中），我得到同样的无法调用的方法未定义'开始'错误。

下面是我更新的CoffeeScript：

 类Lunchhub.Routers.RestaurantLocationsRouter扩展Backbone.Router
  初始化：（选项） -  GT;
    @restaurantLocations =新Lunchhub.Collections.RestaurantLocationsCollection（）
    @ restaurantLocations.reset opt​​ions.restaurantLocations  路线：
    新：newRestaurantLocation
    指数：指数
    ：ID /编辑：​​编辑
    ：标识：秀
    *：索引  newRestaurantLocation： - ＆GT;
    @view =新Lunchhub.Views.RestaurantLocations.NewView（集合：@restaurantLocations）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）  索引： - ＆GT;
    @view =新Lunchhub.Views.RestaurantLocations.IndexView（restaurantLocations：@restaurantLocations）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）  显示：（ID） -  GT;
    restaurant_location = @ restaurantLocations.get（ID）    @view =新Lunchhub.Views.RestaurantLocations.ShowView（型号：restaurant_location）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）  编辑：（ID） -  GT;
    restaurant_location = @ restaurantLocations.get（ID）    @view =新Lunchhub.Views.RestaurantLocations.EditView（型号：restaurant_location）
    $（＃restaurant_locations）。HTML（@ view.render（）。EL）
 

这是我的最新编译的JavaScript：

 （函数（）{
  VAR __hasProp = Object.prototype.hasOwnProperty，
    __extends =功能（子女，父母）{为（父VAR键）{如果（__hasProp.call（父母，键））子[关键] =父[关键] }功能构造函数（）{this.constructor =小孩; } ctor.prototype = parent.prototype; child.prototype =新的构造函数;孩子.__ super__ = parent.prototype;返回子女; };  Lunchhub.Routers.RestaurantLocationsRouter =（函数（_super）{    __extends（RestaurantLocationsRouter，_super）;    功能RestaurantLocationsRouter（）{
      RestaurantLocationsRouter .__超__ constructor.apply（这一点，参数）。
    }    RestaurantLocationsRouter.prototype.initialize =功能（选件）{
      this.restaurantLocations =新Lunchhub.Collections.RestaurantLocationsCollection（）;
      返回this.restaurantLocations.reset（options.restaurantLocations）;
    };    RestaurantLocationsRouter.prototype.routes = {
      新：newRestaurantLocation，
      指数：指数，
      ：ID /编辑：​​编辑，
      ：标识：秀，
      *：索引
    };    RestaurantLocationsRouter.prototype.newRestaurantLocation =功能（）{
      this.view =新Lunchhub.Views.RestaurantLocations.NewView（{
        集合：this.restaurantLocations
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    RestaurantLocationsRouter.prototype.index =功能（）{
      this.view =新Lunchhub.Views.RestaurantLocations.IndexView（{
        restaurantLocations：this.restaurantLocations
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    RestaurantLocationsRouter.prototype.show =功能（ID）{
      VAR restaurant_location;
      restaurant_location = this.restaurantLocations.get（ID）;
      this.view =新Lunchhub.Views.RestaurantLocations.ShowView（{
        型号：restaurant_location
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    RestaurantLocationsRouter.prototype.edit =功能（ID）{
      VAR restaurant_location;
      restaurant_location = this.restaurantLocations.get（ID）;
      this.view =新Lunchhub.Views.RestaurantLocations.EditView（{
        型号：restaurant_location
      }）;
      返回$（＃restaurant_locations）HTML（this.view.render（）EL）。
    };    返回RestaurantLocationsRouter;  }）（Backbone.Router）;}）调用（本）;
 

解决方案

好吧，这竟然是一个pretty深奥的问题。我曾经有过一个吃剩的骨干-min.js 坐在我的应用程序/资产/ JavaScript的目录，即使我有切换到使用不同的骨干文件。这种老骨干-min.js 已得到加载的之后的我的路线定义，这就是被搞乱事情了。我删除后骨干-min.js ，事情开始工作。

I have the following chunk of code. It works perfectly.

<div id="restaurant_locations"></div>

<script type="text/javascript">
  $(function() {
    window.router = new Lunchhub.Routers.RestaurantLocationsRouter({restaurantLocations: <%= @restaurant_locations.to_json.html_safe -%>});
    var Foo = Backbone.Router.extend({routes: {"foo":"bar"}});
    r = new Foo();
    Backbone.history.start();
  });
</script>

However, THIS does NOT work:

<div id="restaurant_locations"></div>

<script type="text/javascript">
  $(function() {
    window.router = new Lunchhub.Routers.RestaurantLocationsRouter({restaurantLocations: <%= @restaurant_locations.to_json.html_safe -%>});
    // All I did was delete the two lines that used to be here
    Backbone.history.start();
  });
</script>

The latter snippet gives me this error:

Uncaught TypeError: Cannot call method 'start' of undefined

So my Foo router instance triggers a proper initialization of Backbone.history, just like you would expect a router instance to do, but my Lunchhub.Routers.RestaurantLocationsRouter instance does not.

Here's my router definition in CoffeeScript (generated automatically by the 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)

And here's the compiled 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);

What could be going wrong here?

EDIT: I've figured out part of the problem. In the CoffeeScript, it was using restaurant_locations in some places where it should have been using restaurantLocations. I'm having a strange problem now, but potentially an easier one: when I copy and paste the compiled JavaScript directly into <script> area, right before the window.router = assignment, everything works perfectly. However, when I try to use the compiled JS as an external file (and I know it's being included - I checked), I get that same Cannot call method 'start' of undefined error.

Here's my updated 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)

And here's my updated compiled 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);

解决方案

Okay, this turned out to be a pretty esoteric problem. I had had a leftover backbone-min.js sitting in my app/assets/javascripts directory, even though I had switched to using a different Backbone file. This "old" backbone-min.js was getting loaded after my route definition and that's what was messing things up. After I deleted backbone-min.js, things started working.

这篇关于Backbone.js的路由器实例是某种无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！