Rails 5.1.4:在观看 /供应商中的第三方资产



我正在尝试运行一个简单的导轨(-v 5.1.4)应用程序,该应用程序实现了一个带有Amcharts库的样本之一。

这是做什么工作:

  • 创建/app/assets/javascripts/amcharts文件夹
  • 将第三方内容复制到/app/assets/javascripts/amcharts
  • //= require amcharts添加到/app/assets/javascripts/application.js

i运行Rails Server,并通过观看原始独立的HTML视图显示图表。因此,我认为编辑的代码正常工作。

这是工作:

  • 创建/vendor/assets(/javascripts)/amcharts文件夹
  • 将第三方内容复制到/vendor/assets(/javascripts)/amcharts
  • //= require amcharts添加到/app/assets/javascripts/application.js
  • config.assets.paths << Rails.root.join('vendor/assets(/javascripts)/amcharts')添加到config/application.rb
  • 将相对路径../../../vendor/assets(/javascripts)/amcharts/$name$.js添加到app/assets/application.js

当我运行Rails Server时,没有给出任何错误,但是该应用程序显示一个空白的白页,而不是图形,该页面的源代码如预期显示了我的View-File代码。

由于我各自的视图称为 amcharts.html.erb,所以我的 app/assets/javascripts/ -folder中有一个 amcharts.coffee -file。可能是链轮错误地认为这是它需要的文件吗?

我也想知道app/config/manifest.js是用什么。app/assets/javascript/application.js文件中似乎都进行了所有相关的更改...

编辑:我的View-File app/views/amcharts/index.html.erb的缩短版本(Amcharts LIB的样本的修改代码)

<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var chart;
var chartData = [ { $data } ];
AmCharts.ready(function () { 
  chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  $AmCharts.funs
  chart.write("chartdiv");
});
</script>

我有机会与专业人士共享我的文件,他解决了问题。要走的路是:

  • 安装宝石'amcharts-rails','rails-assets-amcharts3'
  • 添加//= require amcharts3//= require amcharts3/serial到App/Assets/JavaScripts/application.js

我仍然想知道如何包括供应商/资产中的第三方 - 容器。但是,由于整个过程现在在错误的文件夹中没有文件工作,因此我将其标记为回答。感谢所有试图提供帮助的人!

将JS软件包直接放在vendor/assets下,而不是在vendor/assets/javascripts中。例如,通过//= require amcharts添加/vendor/assets/amcharts/amcharts.js库。

对于一个更具体的示例,这是我的结构方式,包括Rails 5应用程序中的DataTables库:

vendor/assets/DataTables-1.10.16/js/dataTables.bootstrap4.js
vendor/assets/DataTables-1.10.16/js/jquery.dataTables.js
vendor/assets/DataTables-1.10.16/css/dataTables.bootstrap4.css

(注意vendor/assets下方的文件夹层次结构正是DataTables提供的。)

application.css:

/*
 *= css/dataTables.bootstrap4
 */

application.js:

//= require js/jquery.dataTables
//= require js/dataTables.bootstrap4

相关内容

最新更新