Rails 4 Javascript文件不起作用答案

【问题标题】：Rails 4 Javascript files not workingRails 4 Javascript文件不起作用
【发布时间】：2016-04-16 12:23:16
【问题描述】：

您好，我在将 javascript 文件包含到我的 rails 应用程序时遇到了一些问题。

我正在使用 Rails 4

首先我将这些文件名写入我的 application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require CanvasRenderer
//= require Projector
//= require three.min
//= require me
//= require_tree .

它们也在我的 vendor/assets/javascripts 上。所以当我从浏览器打开我的页面时没有任何工作

我查看页面源代码，可以看到，我的 js 文件来自标题

  <link rel="stylesheet" media="all" href="/assets/home.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/CanvasRenderer.self-28076336bdf42eb56ef55649b880be9c4c40f4f9991aaa7cae7ba317c60e57a6.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/Projector.self-b4b1414a2f0bcaf573fcbc6a52ee0a989659089fe0d392f13545f1f065e1abd9.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/three.min.self-9bfe8e307ba0fd9ffeb655fcfc20d5017f34a3d41235b34e06b5fac3da6fd8f1.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/me.self-673e4489da4471935b3097fdd8e29ab07f0bc14dc377bca6dc9cd9cf6e39ec23.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-10ad0916cf31256fe71785e8dc9cc297a96b1cdf7b74aeb61711199b9a3d003f.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="bs8wy2VKuszAk+pdH1e8cLLsL+P21x0Xm8hY76MoccKCPYiKE+QpGqHHuoWe7lwpvOgVsRW/3pyzf6OqBO23YA==" />
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

控制台日志报错

CanvasRenderer.self-28076336bdf42eb56ef55649b880be9c4c40f4f9991aaa7cae7ba317c60e57a6.js:6 Uncaught ReferenceError: THREE is not defined
Projector.self-b4b1414a2f0bcaf573fcbc6a52ee0a989659089fe0d392f13545f1f065e1abd9.js:8 Uncaught ReferenceError: THREE is not defined
me.self-673e448….js?body=1:22 Uncaught TypeError: Cannot read property 'appendChild' of null

我在这里使用的文件相同，一切正常。 http://kleaz.com/demo/dev/

我不明白为什么

【问题讨论】：

有时需要重启本地服务器

标签： javascript ruby-on-rails erb

【解决方案1】：

CanvasRenderer 和 Projector 正在尝试使用未在 three.min.js 中定义的 THREE。

将清单中的资产顺序更改为以下（也是示例中使用的顺序）应该可以解决问题：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require three.min
//= require CanvasRenderer
//= require Projector
//= require me
//= require_tree .

【讨论】：

谢谢，我试过这个方法。在控制台上我现在只有一个错误：'me.self-673e448....js?body=1:22 Uncaught TypeError: Cannot read property 'appendChild' of null'
container = document.createElement('div'); document.body.appendChild(container);