如何与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

回答

相关问题