javascript 资产未加载到我的 html.erb 页面中答案

【问题标题】：javascript asset dosen't load in my html.erb pagejavascript 资产未加载到我的 html.erb 页面中
【发布时间】：2017-07-11 14:37:12
【问题描述】：

我正在使用：

Linux Ubuntu 16.04

ruby 2.4.0p0;

rails 5.1.1

我是 Rails 的初学者，为了学习，我遵循了 lynda.com 上的 Ruby on Rails 4 Essential Training。我现在被困在加载 js 资产任务上。

我创建了包含 js 函数的“app/assets/javascripts/demo.js”文件：

function jsRoar(name) {
  alert('I am ' + name + '. Hear me roar!');
}

然后我在清单文件“app/assets/javascripts/public.js”中加载了这个文件

//= require jquery
//= require jquery_ujs
//= require demo

之后，我在“app/views/layouts/application.html.erb”的布局中添加了 js 的外部包含：

<%= javascript_include_tag "public" %>

在我的控制器中，我通过键入“app/controllers/demo_controller.rb”来包含我的布局

layout 'application'

最后我通过在我的 demo/index.html.erb 中输入这些 js 代码来调用我的函数：

<%= link_to('Roar', '#', :onclick => "jsRoar('Yassser');return true;") %>   
<%= javascript_tag("jsRoar('Rails');")%>

之后，我在我的 chrome 控制台中得到“未定义的函数”并且没有出现警报。我已经在同一个 html.erb 中定义了该函数并且它可以工作，所以我认为这不是 javascript 的问题。我还必须提到，起初当我运行我的服务器时，我遇到了资产编译的问题，所以我通过在“config/initializers/assets.rb”中添加这一行来修复：

Rails.application.config.assets.precompile += %w( public.js)

我可以了解更多详情。请帮忙。

【问题讨论】：

所有内容加载完成后点击链接是否会弹出？
您能否查看页面中包含的public.js（即在Rails 对其进行后处理后，浏览器看到的）并验证demo.js 是否包含在其中？我的猜测是你的清单文件的语法有一些东西使它不能被包含在内。
@SimpleLime ：不，在加载页面后单击链接后也不会显示弹出窗口，因为我在页面加载后拨打电话并在点击链接后拨打电话。
@pjmorse：这是我的 public.js 的内容，我没有发现任何错误： //= 需要 jquery //= 需要 jquery_ujs //= 需要演示 -
@YasserKotrsi 这就是浏览器所看到的吗？也就是说，如果你在浏览器中加载页面，然后使用开发者工具之类的来检查public.js，它是否包含JS代码，或者那个manifest副本？如果它显示该清单，则问题是您的 JS 没有得到后处理。

标签： javascript ruby-on-rails ruby

【解决方案1】：

删除“demo.coffee”文件后，我的问题得到了解决。我发现我的问题源于我有两个同名（但扩展名不同）“demo.js”和“demo.coffee”的文件。由于 Rails 资产助手同等对待 coffescript 和 js 文件，因此这是模棱两可的。所以我删除了“demo.coffee”，我所有的问题都解决了。谢谢各位小伙伴。 @max 非常感谢他在this post 中的回复

【讨论】：

【解决方案2】：

我认为是这样的：

<%= javascript_tag("jsRoar('Rails');")%>

应该是：

<%= javascript_include_tag("demo") %>

【讨论】：

为什么？ javascript_include_tag("public") 应该已经加载了函数，因为 public 清单已经需要 demo。我不是说你错了，但我不明白你的回答为什么你是对的。
其实我不认为这是问题所在，因为我打算通过<%= javascript_tag( "jsRoar('Rails');" )%> helper 调用该函数。对于 js 资源加载，我已经在布局中添加了：<%= javascript_include_tag("public") %> 在标题部分，因为 public.js 是该项目的清单文件。
我只是尝试了它，不同之处在于application.js 中包含的requires 并且它按预期工作，所以我认为pjmorse 是正确的并且js 文件没有正确呈现。而且你不需要调用layout 'application'，除非你的控制器继承自其他布局不同于应用程序的控制器，因为默认情况下它使用'application'

【解决方案3】：

看看这段代码在你的视图中是否有效：

$(document).ready(function(){
   jsRoar('Yassser');
})

【讨论】：