如何将 CoffeeScript 与 Sinatra 一起使用

发布于 2024-11-01 09:49:26 字数 595 浏览 0 评论 0原文

我正在尝试让 CoffeeScript 与 Sinatra 一起工作。我对这两种技术都很陌生，所以这可能很愚蠢。我的问题似乎是coffeescript 编译为javascript 但不在页面上执行，而是显示为html。

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

原文

I'm trying to get coffeescript working with Sinatra. I'm new to both technologies so this is probably something silly. My problem seems to be that the coffeescript compiles to javascript but doesn't execute on page, instead appearing as html.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海的爱人是光 2024-11-08 09:49:26

嗯...看起来您的示例基于此 Sinatra 文档。但出于某种原因，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 仅当位于

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

并在浏览器中打开该警报地址，脚本就会运行。

Hmm... it looks like your example is based on this Sinatra documentation. But for some reason, Sinatra is trying to serve the .js file as HTML, and is preprocessing it accordingly. Are you by any chance setting content_type elsewhere in your application? Try changing your code to

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

You could also try a completely different approach, using either Rack::Coffee or Barista to compile your CoffeeScript to JavaScript automatically at the Rack level. That might be easier if you have a large number of CoffeeScript files anyway.

Edit: After posting the above, it struck me that I'm probably just misinterpreting your markup. Is what you see when you load the page test.js in your browser just

alert('hello world!');

? If so, everything is working fine. JavaScript is only going to run in your browser when it's in an HTML page between <script> tags, or referenced via <script src="test.js"></script>. So in addition to your existing code, add

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

then open that alert address in your browser, and the script should run.

回复收藏 0 原文

怎会甘心 2024-11-08 09:49:26

来自 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

然后

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

application.coffeeindex.erblayout.erb

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

在

<!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>

From sinatra-coffee-script-template
I was just looking for the same setup.

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

get '/' do
  erb :index
end

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

then in 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>

回复收藏 0 原文