Backbone.js - Coffeescript extends

Question

我在本文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);

And i got error:

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

那么，问题在哪里以及如何解决它?

Answer 1

既然您正在使用ROR，那么说您正在使用3.1和资产管道是正确的吗?如果你没有使用3.1，那么这个信息可能仍然是有用的，这取决于你是如何做事情的。

3.1中的资源管道将把你的js文件按字母顺序排列，当这些文件在同一个文件夹中时。

因此，cities_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)中就可以了。