Backbone.js - Coffeescript 扩展

Question

我通过这篇文章 http: //blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/，但在扩展类时出现错误。

所以，我有 LocationsView 类：

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

CountrysView 类：

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

那么，问题出在哪里以及如何修复它？

Answer 1

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

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

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

您将不得不破坏资产管道中文件的顺序（可通过注释控制）以获得正确的结果文件执行...或更改名称。

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

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

##= require ./locations_view

祝你好运

Answer 2

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

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

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

将 car.js 放入子目录（例如 vehicle_models/car.js）即可。