如何與Sinatra一起使用coffeescript

我正在嘗試讓coffeescript與Sinatra一起工作。我對這兩種技術都很陌生，所以這可能是愚蠢的。我的問題似乎是咖啡腳本編譯爲JavaScript，但不在頁面上執行，而是出現爲HTML。如何與Sinatra一起使用coffeescript

#sinatra app 
require 'coffee-script' 
get "/test.js" do 
    coffee :hello 
end 

#hello.coffee 
alert "hello world" 

#My page (/test.js) doesn't execute the js - just displays the code 

#On screen in the browser I get this: 
    (function() { 
    alert("hello world"); 
}).call(this); 

#In the HTML I get this within the body tags 

<pre style="word-wrap: break-word; white-space: pre-wrap;">(function() { 
    alert('hello world!'); 
}).call(this); 
</pre>

來源

2011-04-14 Jack Kinsella

當你說「在HTML中」，你指的是什麼HTML？你的JavaScript是如何嵌入其中的？另外，上面有一個不一致的地方 - 「你好的世界」與「你好的孩子」。 – 2011-04-15 14:56:38

當我說「在HTML中」時，我的意思是當我查看頁面的源代碼時。不一致 - 對於任何混淆抱歉。 – 2011-04-16 20:09:03

對，我明白，但我問：你是如何在Sinatra的結尾創建這個頁面的？ – 2011-04-17 00:05:59

嗯......看起來你的例子是基於this Sinatra documentation。但由於某種原因，Sinatra正在嘗試將.js文件作爲HTML服務，並對其進行相應的預處理。您是否有機會在您的應用的其他地方設置content_type？試着改變你的代碼

get "/test.js" do 
    content_type "text/javascript" 
    coffee :hello 
end

您也可以嘗試完全不同的方法，即使用Rack::Coffee或Barista在機架級自動編譯你的CoffeeScript爲JavaScript。無論如何，如果你有大量的CoffeeScript文件，這可能會更容易。

編輯：發佈上述內容後，它讓我感到震驚，我可能只是誤解了你的標記。您在瀏覽器中加載頁面test.js時看到的只是

alert('hello world!');

？如果是這樣，一切工作正常。當JavaScript處於HTML頁面中時，JavaScript只會在您的瀏覽器中運行，該頁面位於<script>標籤之間，或者通過<script src="test.js"></script>引用。因此，除了現有的代碼，添加

get "/alert", :provides => 'html' do 
    '<script type=src="test.js"></script>' 
end

然後在瀏覽器打開該alert地址，和腳本應該運行。

來源

2011-04-14 15:19:00

非常感謝您的回答。我嘗試了兩種方法，但仍然沒有運氣 - 儘管你沒有在腳本標籤中，但你說得對。我在關於我所看到的問題中添加了額外的信息。可能嘗試機架級解決方案。 – 2011-04-15 11:33:53

我通常只是在開發coffee -wc dirname/時在我的CoffeeScript文件上設置了一個觀察器，然後將編譯後的JS文件部署到生產環境中。這並不理想，但在某些方面並不複雜，並且從我的生產服務器（在我的情況下是Heroku）中刪除了對Node.JS的依賴關係。

來源

2011-04-15 11:10:00

事實上，Ruby的'咖啡script'寶石（現在的Rails 3.1默認）不依賴於節點。它通過[ExecJS（https://github.com/sstephenson/execjs），這反過來會尋找[therubyracer（https://github.com/cowboyd/運行的CoffeeScript的編譯器（這是一個JavaScript文件） therubyracer）寶石;這是一個沒有依賴關係的JavaScript解釋器。完全Heroku友好。 – 2011-04-15 14:54:31

特別是，你想[therubyracer-的Heroku（https://github.com/aler/therubyracer-heroku）。 – 2011-04-28 16:31:21

耶那寶石就派上用場了。沒有聽說過它之前是如何工作的，但現在是非常合情合理的（預編譯的CoffeeScript給JavaScript基於JavaScript解釋紅寶石） – 2011-06-01 19:10:00

從sinatra-coffee-script-template 我只是在尋找相同的設置。

require 'rubygems' 
require 'bundler/setup' 
require 'sinatra' 
require 'coffee-script' 

get '/' do 
    erb :index 
end 

get '/application.js' do 
    coffee :application 
end

然後在application.coffee

$(document).ready -> 
    $('button:first').click -> 
    $('body').toggleClass 'dark', 'light'

index.erb

<h1>I'm living the dream</h1> 
<button>Click me</button>

layout.erb

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Sinatra Coffee-Script Template</title> 
    <style type="text/css"> 
    .dark { 
     background: #2F2F2F; 
     color: #7F7F7F; 
    } 
    .light { 
     background: #EEEEEE; 
     color: #2F2F2F; 
    } 
    </style> 
</head> 
<body> 
    <%= yield %> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script src="/javascripts/listeners.js" type="text/javascript"></script> 
</body> 
</html>

來源

2011-06-01 19:08:17

你沒有提到關於在index.erb或layout.erb..how的application.js是西納特拉將它丟在瀏覽器 – coool 2012-01-20 20:19:21

使用像西納特拉資產小吃寶石（https://rubygems.org/gems/sinatra-asset-snack ）甚至更好，使用引導來開始你的項目，所以你不必擔心設置所有管道（https://github.com/benkitzelman/sinatra-backbone-bootstrap）

來源

2013-03-29 07:54:01 Ben

如何與Sinatra一起使用coffeescript

回答

相關問題