javascript - 无法在rails上应用js效果

Question

我想应用简单的 javascript rainydrop 效果，http://maroslaw.github.io/rainyday.js/demo2.html

但是这不起作用。我得到了非常意想不到的结果，如下图所示。

我认为问题出在 Assets 管道上？但我没有任何想法

这是布局 joseph_memo.html.haml

!!!
%html{lang: "en"}
  %head
    %meta{charset: "utf-8"}/
    %title rainyday.js demo #4
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true    
    %style{media: "screen"}
      :cdata
        img { display: none; }
        body { overflow: hidden; }
        \#canvas { position: absolute; top: 0; left: 0; }
    %script{src:  asset_path("rainyday/dist/rainyday.0.1.1.min.js"), type: "text/javascript"}
    :javascript
      function run() {
        var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight);
          engine.gravity = engine.GRAVITY_NON_LINEAR;
          engine.trail = engine.TRAIL_DROPS;
          engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
          engine.rain([
            engine.preset(0, 2, 0.5),
            engine.preset(4, 4, 1)
          ], 50);
      }

  %body{onload: "run();"}
    %img#background{alt: "background", src: asset_path("rainyday/img/city.jpg")}/
    #cholder
      %canvas#canvas

Answer 1

布局

该问题可能是由于您将 javascript 直接包含在您的 application 布局中造成的。

您正在使用 anonymous function (因在 Rails 上无法正常工作而臭名昭著)，然后绑定(bind)到主体的 on-load 事件。使用 [unobtrusive] javascript 2 会更好并将代码放入您的 /app/assets/javascripts/application.js 文件中:

#app/assets/javascripts/application.js
//require rainyday/dist/rainyday.0.1.1.min.js

var make_it_rain = function() {
    var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight);
    engine.gravity = engine.GRAVITY_NON_LINEAR;
    engine.trail = engine.TRAIL_DROPS;
    engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
    engine.rain([
        engine.preset(0, 2, 0.5),
        engine.preset(4, 4, 1)
    ], 50);
};
$(document).on("page:load ready", make_it_rain);

如果您的 rain 插件正常工作，这应该能让事情正常工作。我会更详细地介绍如何更好地构建您的应用程序，但这对于我认为的另一个答案会更好