在Rails应用程序中加载自定义javascript文件

Load custom javascript files in Rails app

本文关键字：自定义 javascript 文件 加载 Rails 应用程序      更新时间：2023-09-26

我开发了一个javascript图表工具（使用kineticjs），需要加载一些不同的js文件。但它们需要按顺序加载。我设法做到这一点：

在特定视图内（在文件顶部）：

<%= javascript_include_tag "kinetic" %>
<%= javascript_include_tag "diagramtool/diagramtool0" %>
<%= javascript_include_tag "diagramtool/diagramtool1" %>
<%= javascript_include_tag "diagramtool/diagramtool2" %>
<%= javascript_include_tag "diagramtool/diagramtool3" %>
<%= javascript_include_tag "diagramtool/diagramtool5" %>
<%= javascript_include_tag "diagramtool/diagramtool6" %>

这个在assets.rb:

# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += %w( kinetic.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool0.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool1.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool2.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool3.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool5.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool6.js )

文件位于assets/javascripts/diagramtool 中

问题是，当我移动到具有上面的代码来加载文件的视图时，它们没有按顺序加载。但如果我刷新页面，它们会按顺序加载！

所以，我的问题是

如何确保js文件按顺序加载？为什么刷新页面时会按顺序加载文件？为什么当我浏览应用程序时，它们没有按顺序加载？

还有别的办法吗？我尝试在application.js中使用带有"require"关键字的资产管道来实现这一点。但我不知道该怎么做。

我还尝试将所有代码放在一个文件中，但该文件是在kinetic文件之前加载的！我会出现错误，因为我需要先加载库文件。但如果我刷新页面，它会再次工作。

有什么帮助吗？我真的不知道该怎么办，让它正常工作。我是RubyonRails的新手，我仍在学习如何进行这种"配置"。

编辑：我没有使用application.js来加载js文件，因为我不能用这种方式。但现在是：

//= require jquery
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks
/* 
 require kinetic
 require diagramtool
 require_tree . 
 */

只是这样解决的：

创建了清单文件diagrams.js:

//= require diagramtool/kinetic
//= require diagramtool/diagramtool0
//= require diagramtool/diagramtool1
//= require diagramtool/diagramtool2

在视图中添加了这个：

<%= javascript_include_tag "diagrams" %>

将资产管道与清单文件一起使用。

相关文章：