0

私は現在、Rails 4アプリケーションでJavascript/Coffeescriptファイルをthis tutorialを使用して再編成中です。これに先立って、私は資産パイプラインを知らないため、大部分のコードを1つの巨大なcoffeescriptファイルに保存しました。目標は、この巨大なファイルを論理的で管理しやすい部分に分割することです。Javascriptファイルの依存関係がマニフェストの順序で解決されない

私たちのアプリケーションでは、いくつかの一般的なクラスを使用して、二重リンクリストのようなプログラミング構造を定義しています。私たちのアプリケーションコードの残りの部分はapp/assets/javascripts/custom/trips.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 
... 

:私は、別のファイルにこれを入れてapp/assets/javascripts/misc_classes.coffeeを望んでいました。 trips.coffeeのコードは、上記の他のJavaScriptファイルから二重リンクリストクラスを使用:

### ***********************************### 
### ****** 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() 
... 
Rails Asset Pipeline Guide

から、この依存性を処理する方法はapplication.jsマニフェストファイルを介して行われます。

あなたには、いくつかの特定のJavaScriptがマニフェストに最初の前提条件のファイルを必要とし、連結ファイル内の他のいくつかの上に終わることを確認する必要がある場合。 requireディレクティブファミリは、ファイルが出力に2回含まれないようにします。

だから、私たちのapplication.jsファイルは次のようになります。

//= 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/. 

をしかし、私は、コードを実行したとき、私は、コンソールで次のエラーを取得する: Uncaught ReferenceError: DoublyList is not defined

ですが、なぜでしょうか?ここの他の記事によると、マニフェストファイルを正しく書いたようです。両方のファイルがサイト<header>セクションに正しい順序で含まれていることを確認できます。

ありがとうございます!

答えて

0

興味のある方は、スコープが原因で問題が発生しました。本番環境では、すべてのファイルがapplication.jsに結合されていましたが、開発中にはまだすべて別ファイルでした。

### ***********************************### 
### ******* 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 

クレジットをthis answer

に:私はそれを動作させるためにグローバル名前空間にクラスを追加する必要がありました
関連する問題