如何在 Haml 中包含外部 JavaScript 文件

Question

我想使用外部 JavaScript 和 jQuery 文件动态添加样式和函数，但它不断抛出错误。

Ruby代码是：

# myapp.rb
require 'sinatra'
require 'sinatra/reloader'
require 'haml'

get '/' do
    @contacts = [
        {
            name: "Petit",
            class: "K1"
        }
    ]

    haml :index
end

get '/about-us' do
    haml :about
end

Haml 代码是：

!!!
%html
    %head
        = javascript_include_tag "actions"

    %body
        %h1#title.titles
            This is a page title

        %ul
            - @contacts.each do |contact|
                %li
                    = "#{contact[:name]}'s class is #{contact[:class]}"

        %a{ href: "/about-us"}
            About

这行似乎是问题所在：

= javascript_include_tag "actions"

错误是当我运行浏览器中的应用程序：

NoMethodError at /
undefined method `javascript_include_tag' for #<Sinatra::Application:"some hex address here">

没有那行代码，它运行没问题，嵌入的 JavaScript 也可以。我无法 link 外部 JavaScript 文件。

Answer 1

当您的目录如下所示时：

ruby-web/
| public/
|-| css/
|-|-| styles.css
|
|-| javascript/
|-|-| jquery-3.5.1.min.js
|-|-| actions.js
|
| views/
|-| index.haml
|-| about.haml
| my-app.rb

您的 Ruby 代码如下所示：

# myapp.rb
require 'sinatra'
require 'sinatra/reloader'
require 'haml'

get '/' do
    haml :index
end

get '/about-us' do
    haml :about
end

您的 index.haml 将成为连接到服务器时显示的根页面，因此您的 index.haml 代码应如下所示：

!!!
%html
    %head
        /Styles :
        %link{:href => "css/styles.css", :type => "text/css"}
        /Scripts :
        %script{:src => "javascript/jquery-3.5.1.min.js", :type => "text/javascript"}
        %script{:src => "javascript/actions.js", :type => "text/javascript"}

    %body
        %h1#title
            Equations

        %div#about
            %footer#footer
                %a{ href: "/about-us"}
                    About

注意 Haml 代码中的 %link 和 %script 标记，并查看 :src 和 :href 中给出的路径。

是：

:src => "javascript/actions.js"

和

:href => "css/styles.css"

不是：

:src => "public/javascript/actions.js"

和

:href => "public/css/styles.css"

即使脚本和样式位于 public 文件夹中。

也不是：

:src => "../public/javascript/actions.js"

和

:href => "../public/css/styles.css"

即使脚本和样式相对于 index.haml.

../public/javascript/ 或 ../public/css/

现在您已经有了包含脚本和样式的 public 文件夹，您可以使用上述方法 link 将它们添加到它们。

如何在 Haml 中包含外部 JavaScript 文件

How to include an external JavaScript file in Haml

javascript

ruby

jquery

haml

sinatra