在部分渲染上執行JavaScript

Question

我有一些JavaScript代碼，我想在用戶單擊其中一個文件夾後執行 - 它觸發show action和show.js.erb，渲染部分。

Show.js.erb，其中，當用戶點擊他們的文件夾中的一個被觸發，如下所示：

$("body").append("<%=j render :partial => 'contents', :locals => {:folder => @folder } %>"); 

它成功地注入部分_contents.html.erb，它看起來像這樣：

<script type="text/javascript"> 
    d3JSON = function(){ 
     d3.json("/folders/<%= @folder.id %>.json", function(error, data) { 
      if (error) return console.warn(error); 

      var folderChildren = [], 
      circle; 

          /*for (var i=0; i < data.submissions.length; i++) { 
           var submissionWords = data.submissions[i].content.split(' ').join(''); 
           var size = submissionWords.length; 
           folderChildren[data.submissions[i].id] = size; 
           console.log(folderChildren); 
          };*/ 

      var svg = d3.select("body").selectAll("svg"); 

      circle = svg.selectAll("circle") 
      .data(data.submissions); 

      circle.enter().append("svg:a") 
      .attr("xlink:href", function(d){ 
       return "http://localhost:3000/submissions/" + d.id; 
      }) 
      .append("circle") 
      .attr("cy", function(d) {return d.content.length * 5 + "px";}) 
      .attr("class", "floating") 
      .attr("cx", function(d){ 
       return (d.content.length/2) * 10 + "px"; 
      }) 
      .attr("r", function(d){ return (d.content.length/2) * 1.2;}); 

      circle.exit().remove(); 

     }); 
    }; 

    d3JSON(); 
</script> 

我測試過這個JavaScript和它的作品，但是當它注入它應該與DOM中的div互動，事實並非如此。 div位於我的index.html.erb文件中，所以當這個JS被注入時它們已經被加載。我嘗試了很多不同的事情，試圖讓這個工作，但唉，沒有運氣任何建議？如果我嘗試通過部分工作來加載簡單的alert()這樣的東西，但我猜這是因爲加載DOM和js的順序而無法工作。

Answer 1

你說的對DOM和js的加載順序是正確的。因此，您可以在show.js.erb中觸發自定義事件，並在js文件之一中收聽該事件，並在那裏致電d3JSON();。

// show.js.erb 

$("body").append("<%=j render :partial => 'contents', :locals => {:folder => @folder } %>").trigger('show'); 

在是在你的頁面

$(document).ready(function(){ 
    $('body').on('show', function() { 
     d3JSON(); 
    }); 
}); 

加載，你不需要在你的_contents.html.erb的d3JSON();調用JavaScript文件之一。

試試看。