Rails 4 Javascript文件无法正常工作

时间:2016-04-16 12:23:17

标签: javascript ruby-on-rails erb

您好我的问题包括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/

我无法理解为什么

1 个答案:

答案 0 :(得分:0)

CanvasRendererProjector在三个.min.js中定义之前尝试使用THREE

将清单中的资产订单更改为以下内容(也是您示例中使用的订单)应解决问题:

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