Backbone.js - Coffeescript 扩展答案

【问题标题】：Backbone.js - Coffeescript extendsBackbone.js - Coffeescript 扩展
【发布时间】：2011-12-20 02:14:31
【问题描述】：

我在这篇文章http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/ 中使用backbone.js 进行链接选择，但是在扩展类时出错了。

所以，我有 LocationsView 类：

class Blog.Views.LocationsView extends Backbone.View
  events:
    "change": "changeSelected"

CountriesView 类：

class Blog.Views.CountriesView extends Blog.Views.LocationsView
  setSelectedId: (countryId) ->

CitiesView 类：

class Blog.Views.CitiesView extends Blog.Views.LocationsView
  setSelectedId: (cityId) ->

但是当coffeescript代码编译成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;
cities_view.js:5 Uncaught TypeError: Cannot read property 'prototype' of undefined
    child.prototype = new ctor;
    child.__super__ = parent.prototype;
    return child;
  };
  Blog.Views.CitiesView = (function() {
    __extends(CitiesView, Blog.Views.LocationsView);
    function CitiesView() {
      CitiesView.__super__.constructor.apply(this, arguments);
    }
    CitiesView.prototype.setSelectedId = function(cityId) {};
    return CitiesView;
  })();
}).call(this);

我得到了错误：

Uncaught TypeError: Cannot read property 'prototype' of undefined    cities_view.js:5

那么，问题出在哪里以及如何解决？

【问题讨论】：

您能提供完整的堆栈跟踪吗？

标签： javascript ruby-on-rails-3 backbone.js coffeescript

【解决方案1】：

既然您使用的是 ROR，那么说您将 3.1 与资产管道一起使用是否正确？如果您使用的不是 3.1，那么此信息可能仍然有用，具体取决于您的操作方式。

当文件位于同一文件夹中时，3.1 中的资产管道将按字母顺序显示您的 js 文件。

因此，cities_view.js 将在locations_view.js 之前执行。然后，当CitiesView 尝试定义自己时，LocationsView 还不存在。（但这让我有点困惑，因为您不应该使用 .coffee 文件而不是 .js 文件吗？）

您必须弄乱资产管道中文件的顺序（可通过 cmets 控制）才能执行正确的文件...或更改名称。

换句话说，您可以告诉 Sprockets（RoR 中管理您的资产管道的东西）首先需要另一个文件。

在cities_view.coffee 文件的顶部，您可以添加以下行：

##= require ./locations_view

祝你好运

【讨论】：

完美。就是这样。谢谢！
多年过去了，但你仍然用这个回复来拯救驴子，干杯！

【解决方案2】：

正如@brian Genisio 所说，问题在于 ROR 资产管道中文件加载的字母顺序。

我发现将所有继承自其他模型的模型放在一个子目录中很有用。这样，ROR 会先加载父目录中的所有文件，然后再加载子目录中的文件。它对读者来说也更合乎逻辑。

例如vehicle.js 和 car.js（汽车扩展车辆）在同一目录中不起作用，因为 car.js 在 vehicle.js 之前加载和运行，并且无法从它继承。

然后将car.js 放在子目录中（例如vehicle_models/car.js）就可以了。

【讨论】：