在部分渲染上执行 JavaScript答案

【问题标题】：Execute JavaScript on partial render在部分渲染上执行 JavaScript
【发布时间】：2013-08-02 22:24:42
【问题描述】：

我有一些 JavaScript 代码，我想在用户单击他们的一个文件夹后执行它们——它会触发显示操作和显示部分内容的 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的加载顺序而不起作用。

【问题讨论】：

标签： javascript ruby-on-rails ruby

【解决方案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();
    });
});

而且您不需要在您的_contents.html.erb 中调用d3JSON();。

试试这个。

【讨论】：