[英]How to include an external JavaScript file in Haml
I want to add styles and functions dynamically using an external JavaScript and jQuery file, but it is constantly throwing an error.我想添加 styles 并使用外部 JavaScript 和 jQuery 文件动态运行,但它不断抛出错误。
The Ruby code is: 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
The Haml code is:哈姆尔代码是:
!!!
%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
This line seems to be the problem:这条线似乎是问题所在:
= javascript_include_tag "actions"
The error is when I run the application in the browser:错误是当我在浏览器中运行应用程序时:
NoMethodError at /
undefined method `javascript_include_tag' for #<Sinatra::Application:"some hex address here">
Without that line of code it runs fine, and the embedded JavaScript works too.没有那行代码它运行良好,嵌入式 JavaScript 也可以工作。 I haven't been able to link an external JavaScript file.
我无法链接外部 JavaScript 文件。
When your directory looks like this:当您的目录如下所示时:
ruby-web/
| public/
|-| css/
|-|-| styles.css
|
|-| javascript/
|-|-| jquery-3.5.1.min.js
|-|-| actions.js
|
| views/
|-| index.haml
|-| about.haml
| my-app.rb
and your Ruby code looks like this:您的 Ruby 代码如下所示:
# myapp.rb
require 'sinatra'
require 'sinatra/reloader'
require 'haml'
get '/' do
haml :index
end
get '/about-us' do
haml :about
end
Your index.haml
is going to be the root page which is going to be displayed when you connect to the server, so your index.haml
code should look like this:您的
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
Notice the %link
and %script
tags in the Haml code, and look at the paths given in :src
and :href
.注意 Haml 代码中的
%link
和%script
标签,并查看:src
和:href
中给出的路径。
It is:这是:
:src => "javascript/actions.js"
and和
:href => "css/styles.css"
Not:不是:
:src => "public/javascript/actions.js"
and和
:href => "public/css/styles.css"
even though the script and styles are in the public
folder.即使脚本和 styles 在
public
文件夹中。
Nor:也不:
:src => "../public/javascript/actions.js"
and和
:href => "../public/css/styles.css"
even though the script and styles are in ../public/javascript/
or ../public/css/
relative to index.haml.
即使脚本和 styles 相对于 index.haml 位于
../public/javascript/
或../public/css/
中index.haml.
Now that you have a public folder containing the script and styles, you can link to them with the method mentioned above.现在你有了一个包含脚本和 styles 的公用文件夹,你可以用上面提到的方法链接到它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.