javascript - riot - simple js framework

Backbone.js-Coffeescript se extiende

Question

Estoy haciendo selecciones de encadenamiento con backbone.js por este artículo http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/ , pero obtuve errores al extender las clases.

Por lo tanto, tengo clase LocationsView:

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

PaísesView clase:

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

Clase CitiesView:

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

Pero cuando el código de coffeescript compilado para javascript mis clases extendidas dobles se ve así:

(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);

Y me salió un error:

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

Entonces, ¿dónde está el problema y cómo solucionarlo?

Answer 1

Como dice @brian Genisio, el problema es el orden alfabético de carga de archivos en la cartera de activos de ROR.

He encontrado útil colocar todos los modelos que heredan de otros en un subdirectorio. De esta manera, ROR carga primero todos los archivos en el directorio principal, antes de cargar archivos en el subdirectorio. También parece más lógico para el lector.

Por ejemplo, car.js y car.js (donde el auto se extiende al vehículo) en el mismo directorio no funcionaría, ya que car.js se carga y se ejecuta antes que vehicle.js , y no puede heredarlo.

Poner car.js en un subdirectorio (por ejemplo, vehicle_models/car.js ) funcionaría.

Answer 2

Ya que está usando ROR, ¿es correcto decir que está usando 3.1 con el flujo de activos? Si no está usando 3.1, entonces esta información podría ser útil, dependiendo de cómo esté haciendo las cosas.

La canalización de activos en 3.1 traerá sus archivos js en orden alfabético cuando los archivos estén dentro de la misma carpeta.

Debido a eso, cities_view.js se ejecutará antes de locations_view.js. Entonces, cuando CitiesView intenta definirse a sí mismo, LocationsView no existe todavía. (Pero esto me confunde un poco porque ¿no deberías estar usando archivos .coffee en lugar de archivos .js?)

Tendrá que deshacerse del orden de los archivos en la canalización de activos (controlable mediante comentarios) para poder ejecutar el archivo correcto ... o cambiar los nombres.

En otras palabras, puede decirle a Sprockets (la cosa en RoR que administra su canalización de activos) que requiera el otro archivo primero.

En la parte superior de su archivo cities_view.coffee , puede agregar la siguiente línea:

##= require ./locations_view

Buena suerte