在部分渲染上執行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>

我已經測試了這個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');

在您的頁面中加載的一個javascript文件中

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

而且你不需要d3JSON(); 在_contents.html.erb調用。

試一試。