0

Ich bin gerade dabei, unsere Javascript/Coffeescript-Dateien in unserer Rails 4-Anwendung mit this tutorial zu reorganisieren. Da ich die Asset-Pipeline bisher nicht kannte, hatten wir den Großteil unseres Codes in einer riesigen Coffeescript-Datei gespeichert. Ziel ist es, diese riesige Datei in logische, überschaubare Teile zu zerlegen.Javascript Dateiabhängigkeiten nicht mit Manifest Order

Unsere Anwendung verwendet einige allgemeine Klassen, um Programmierstrukturen wie eine doppelt verkettete Liste zu definieren. Ich wollte diese in einer separaten Datei setzen, app/assets/javascripts/misc_classes.coffee:

### ***********************************### 
### ******* General Classes ***********### 
### ***********************************### 

#single node for doubly linked list 
class Node 
    constructor: (data) -> 
    @data = data 
    prev = null 
    next = null 

#Doubly-linked list class, to be used for front-end destinations 
#Details: https://en.wikipedia.org/wiki/Doubly_linked_list 
class DoublyList 
    constructor:() -> 
    @length = 0 #length of the current list 
    @head = null #first node of the list 
    @tail = null #last node of the list 
... 

Der Rest unseres Anwendungscode in app/assets/javascripts/custom/trips.coffee befindet. Der Code in trips.coffee verwendet die doppelt verknüpfte Liste Klasse von der anderen Javascript-Datei oben beschrieben:

### ***********************************### 
### ****** Custom Site Classes ********### 
### ***********************************### 

class Trip 
    constructor: (id, editable) -> 
    @id = id #trip_id 
    @title = 'New Trip' 
    @cities = 0 #number of citites in trip 
    @countries = 0 #number of countries in trip 
    @distance = 0 #distance in KM 
    @days = 0 #duration of trip in days 
    @destinations = new DoublyList() 
... 

Vom Rails Asset Pipeline Guide, die Art und Weise, diese Abhängigkeit zu handhaben ist über die application.js Manifest-Datei.

Wenn Sie einige besondere JavaScript endet über einem anderen in der verketteten Datei, um sicherzustellen, benötigen die Voraussetzung Datei zuerst im Manifest. Beachten Sie, dass die Familie der Anforderungsdirektiven verhindert, dass Dateien doppelt in die Ausgabe eingeschlossen werden.

Also unsere application.js Datei sieht wie folgt aus:

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require jquery-ui/sortable 
//= require jquery-ui/datepicker 
//= require colorbox-rails 
//= require jquery.readyselector 
//= require turbolinks 
//= require jquery.externalscript 
//= require misc_classes 
//= require_tree ./custom/. 

Allerdings, wenn ich den Code ausführen, bekomme ich die folgende Fehlermeldung in der Konsole: Uncaught ReferenceError: DoublyList is not defined

Warum ist das passiert? Laut den anderen Posts hier scheint es, dass ich die Manifest-Datei korrekt geschrieben habe. Ich kann überprüfen, beide Dateien in den Websites enthalten sind <header> Abschnitt in der richtigen Reihenfolge.

Danke!

Antwort

0

Für jeden Interessierten war das Problem wegen des Scoping. In der Produktion wären alle Dateien in application.js zusammengefügt worden, aber in der Entwicklung waren alle noch getrennte Dateien. Ich hatte die Klasse, um den globalen Namensraum hinzuzufügen, für sie zu arbeiten:

### ***********************************### 
### ******* General Classes ***********### 
### ***********************************### 

#single node for doubly linked list 
class this.Node 
    constructor: (data) -> 
    @data = data 
    prev = null 
    next = null 

#Doubly-linked list class, to be used for front-end destinations 
#Details: https://en.wikipedia.org/wiki/Doubly_linked_list 
class this.DoublyList 
    constructor:() -> 
    @length = 0 #length of the current list 
    @head = null #first node of the list 
    @tail = null #last node of the list 

Credits this answer