Ruby on rails 在Rails应用程序中连接HTML、JavaScript和CSS_Ruby On Rails

Ruby on rails 在Rails应用程序中连接HTML、JavaScript和CSS

ruby-on-rails

Ruby on rails 在Rails应用程序中连接HTML、JavaScript和CSS,ruby-on-rails,Ruby On Rails,因此在Assets文件夹中有两个文件夹，分别用于javascripts和样式表。因此，我在这些文件夹中添加了一个spike.js和一个CSS文件spikecss.CSS，并编写了一些Javascript和CSS代码现在我在index.html页面上写了这样的东西？这不管用。我怎么把这些东西连在一起工作这是一个测试应用程序，主要用于交易的javascript方面，因此目前我没有模型、控制器和视图。我在JavaScript文件中绘制D3图表，所以我只想在点击网页时显示它们 Javascript

因此在

Assets

文件夹中有两个文件夹，分别用于

javascripts

和

样式表

。因此，我在这些文件夹中添加了一个

spike.js

和一个CSS文件

spikecss.CSS

，并编写了一些Javascript和CSS代码

现在我在index.html页面上写了这样的东西？这不管用。我怎么把这些东西连在一起工作

这是一个测试应用程序，主要用于交易的javascript方面，因此目前我没有模型、控制器和视图。我在JavaScript文件中绘制D3图表，所以我只想在点击网页时显示它们

Javascript文件：

var data = [4, 8, 15, 16, 23, 42];

var chart = d3.select("body").append("div")
    .attr("class", "chart");

chart.selectAll(chart)
    .data(data)
    .enter().append("div")
    .style("width", function(d){return d*5 +"px";});

<!DOCTYPE html>
<html>
<head>
    <title>Here we go</title>
</head>
<body>

javascript_include_tag :defaults, "spike"

</body>
</html>

Index.html文件：

var data = [4, 8, 15, 16, 23, 42];

var chart = d3.select("body").append("div")
    .attr("class", "chart");

chart.selectAll(chart)
    .data(data)
    .enter().append("div")
    .style("width", function(d){return d*5 +"px";});

<!DOCTYPE html>
<html>
<head>
    <title>Here we go</title>
</head>
<body>

javascript_include_tag :defaults, "spike"

</body>
</html>


我们开始
javascript_include_标记：默认值，“spike”

更新
根据Ryan在本文中使用的方法，您可以使用这两个步骤创建一个动态
index.html.erb
页面（原始的、稍微复杂的答案可以在下面看到）：
首先，将routes.rb文件设置为如下所示：

MyApplication::Application.routes.draw do root to: 'application#index' end
接下来，将您的
/public/index.html
文件移动到
/app/views/application/index.html.erb
。不要只是复制它-移动它。这意味着您的
/public
目录中不应该有index.html文件
恭喜，您现在有了一个可以处理ERB标记的动态索引页面
原始答案

/public/index.html
文件是静态提供的，因此您需要像编写Rails一样编写它。将css和javascript位置添加到
部分，分别使用
和
，就像对任何普通HTML页面一样
如果您喜欢用Rails的方式进行此操作，您至少需要：

routes.rb中的条目
相应的空控制器和一个index.html 文件（或index.html.erb ，index.html.haml 等），位于/app/views/some_name/ ，其中some_name 与控制器名称相同（减去“控制器”一词）
然后，您可以将自定义文件名添加到/app/assets/javascript/application.js 和/app/assets/stylesheets/application.css 清单中，以将它们拉入页面或者，您可以使用嵌入式ruby手动编辑/app/views/layouts/application.html.erb 模板。有关如何执行此操作的文档，请参阅和哦，还有一件事——您编写的javascript将在DOM加载之前执行。要避免这种情况，您需要使用以下内容进行包装： $(function(){ /* your code here */ }); 哪个index.html文件？在/public或/app/views/something/中的那个？您不能在/public/index.html中使用嵌入式ruby。。。在该部分中使用标记，就像在任何静态HTML页面中一样。公共文件夹中的标记。显示/assets/application.js和/assets/application.css