Rails 5：JavaScript 运行但未出现在浏览器中答案

【问题标题】：Rails 5: JavaScript runs but doesn't appear in browserRails 5：JavaScript 运行但未出现在浏览器中
【发布时间】：2017-10-19 23:53:50
【问题描述】：

我正在尝试在我的 Rails 5 应用程序中的画布元素上运行一些 JavaScript。我的画布元素出现在相应的页面上，但我看不到 JS。在确保问题不在于 rails 资产管道后，我添加了一些控制台日志消息，当使用开发人员工具时，我可以看到 JS 正在运行 - 它初始化并识别我的画布元素。我已经能够看到 JS 在屏幕上运行了几次，但无法找出共同的元素（确保它不是清除缓存/cookie 的问题）。我在我的根路径上使用 JS 并且想知道路径是否是某种问题？非常感谢您的建议和智慧！

console.log("This is a test");

var particles = [];
var particleCount = 30;
var maxVelocity = 2;
var targetFPS = 33;

var canvasWidth = 400;
var canvasHeight = 400;

var imageObj = new Image();


imageObj.onload = function() {
    particles.forEach(function(particle) {
            particle.setImage(imageObj);
    });
};

imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";

function Particle(context) {
    this.x = 0;
    this.y = 0;

    this.xVelocity = 0;
    this.yVelocity = 0;

    this.radius = 5;

    this.context = context;

    this.draw = function() {

        if(this.image){
            this.context.drawImage(this.image, this.x-128, this.y-128);
            // If the image is being rendered do not draw the circle so break out of the draw function
            return;
        }
        this.context.beginPath();
        this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        this.context.fillStyle = "rgba(0, 255, 255, 1)";
        this.context.fill();
        this.context.closePath();
    };

    this.update = function() {
        this.x += this.xVelocity;
        this.y += this.yVelocity;

        if (this.x >= canvasWidth) {
            this.xVelocity = -this.xVelocity;
            this.x = canvasWidth;
        }

        else if (this.x <= 0) {
            this.xVelocity = -this.xVelocity;
            this.x = 0;
        }

        if (this.y >= canvasHeight) {
            this.yVelocity = -this.yVelocity;
            this.y = canvasHeight;
        }

        else if (this.y <= 0) {
            this.yVelocity = -this.yVelocity;
            this.y = 0;
        }
    };

    this.setPosition = function(x, y) {
        this.x = x;
        this.y = y;
    };

    this.setVelocity = function(x, y) {
        this.xVelocity = x;
        this.yVelocity = y;
    };

    this.setImage = function(image){
        this.image = image;
    }
}

function generateRandom(min, max){
    return Math.random() * (max - min) + min;
}

var context;

function init() {
    console.log("in init")
    var canvas = document.getElementById('myCanvas');
    console.log("canvas: " + canvas)
    if (canvas.getContext) {

        context = canvas.getContext('2d');

        for(var i=0; i < particleCount; ++i){
            var particle = new Particle(context);

            particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));

            particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
            particles.push(particle);
        }
    }
    else {
        alert("Please use a modern browser");
    }
}

function draw() {
    // Clear the drawing surface and fill it with a black background
    context.fillStyle = "rgba(0, 0, 0, 0.5)";
    context.fillRect(0, 0, 400, 400);

    // Go through all of the particles and draw them.
    particles.forEach(function(particle) {
        particle.draw();
    });
}

function update() {
    particles.forEach(function(particle) {
        particle.update();
    });
}


document.addEventListener("DOMContentLoaded", function(event){
  console.log("gets to init")
  init();
});

if (context) {
    setInterval(function() {
        // Update the scene befoe drawing
        update();

        // Draw the scene
        draw();
    }, 1000 / targetFPS);
}

HTML

 <% content_for :head do %>
   <%= javascript_include_tag "home.js" %>
 <% end %>

<body>
  <canvas id="myCanvas" width="400" height="400">
 </canvas>


</body>
</html>

铁路路线

  root to: 'products#home', as: "root"

再次感谢！

【问题讨论】：

如果您使用 turbolinks 添加不同的脚本以通过脚本标签加载到不同的页面上，这不是一个可行的解决方案。相反，您想编写一个幂等 javascript 函数并链接到 turbolinks 加载事件。 github.com/turbolinks/…

标签： javascript ruby-on-rails html canvas ruby-on-rails-5

【解决方案1】：

您可以使用以下方法之一：

咖啡本

$(document).on 'ready page:load', ->
  ...your code goes here...

Javascript（每个请求）

var ready = function() {
   ... your init code...
};
$(document).ready(ready);
$(document).on('page:load', ready);

或

$(document).on('ready page:load', function () {
   ...your code goes here...
});

使用 Turbolinks

$(document).on('turbolinks:load', function() {
  ...your code goes here...
});

【讨论】：

【解决方案2】：

您是否使用了 turbolinks 加载功能？只需将所有 Js 包装在以下代码中即可：

$(document).on('turbolinks:load', function(){

【讨论】：