Rails 5：JavaScript运行但没有出现在浏览器

问题描述：

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

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>

Rails的路线

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

再次感谢！

如果使用turbolinks添加不同的脚本由脚本标记不同的网页加载是不是一个可行的解决方案。相反，你想写一个idempotent JavaScript函数并链接到turbolinks加载事件。 https://github.com/turbolinks/turbolinks#making-transformations-idempotent – max

答

您可以使用下列之一：

Coffescript

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

（每个请求）

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

的Javascript OR

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

使用Turbolinks

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

答

您是否在使用turbolinks加载函数？只是所有包裹的js在下面的代码：

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

Rails 5：JavaScript运行但没有出现在浏览器

相关推荐