부분 렌더링시 JavaScript 실행

Question

사용자가 폴더 중 하나를 클릭하면 실행하려는 일부 JavaScript 코드가 있습니다. 즉, show 액션을 실행하고 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> 

나는이 자바 스크립트를 테스트 한 그것은 작동하지만, 주입 때 DOM에서 div의 상호 작용을 가정하고 그렇지 않은됩니다. div는 내 index.html.erb 파일에 있으므로이 JS를 삽입 할 때 이미로드되어 있습니다. 나는이 일을 시도하고 얻으려는 많은 다른 것들을 시도했지만, 슬프게도 운이 없다. 어떤 충고? 부분을 ​​통해 alert()과 같은 간단한 것을로드하려고하면 DOM과 js의로드 순서로 인해 작동하지 않는다고 생각합니다.

Answer 1

DOM 및 js의로드 순서가 맞습니다. 따라서 수행 할 수있는 작업은 show.js.erb에서 맞춤 이벤트를 실행하고 해당 이벤트를 js 파일 중 하나에서 듣고 d3JSON();으로 전화하는 것입니다. 페이지

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

에로드 그리고 당신은 당신의 _contents.html.erb에서 d3JSON(); 전화를하지 않아도 당신의 자바 스크립트 파일 중 하나에서

// show.js.erb 

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

.

시도해보십시오.