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"

再次感謝！

來源

2017-10-19 K. Mackenzie

如果使用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... 
});

來源

2017-10-25 14:16:20 mmsilviu

您是否在使用turbolinks加載函數？只是所有包裹的js在下面的代碼：

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

來源

2017-10-20 04:06:44 timboon

Rails 5：JavaScript運行但沒有出現在瀏覽器

回答

相關問題