在部分渲染上执行 JavaScript [英] Execute JavaScript on partial render

问题描述

我有一些 JavaScript 代码，我想在用户单击他们的文件夹之一后执行这些代码——它会触发 show 操作和 show.js.erb，后者会呈现部分.

I have some JavaScript code that I'd like to execute after a user clicks one of their folders -- it triggers the show action and show.js.erb, which renders the partial.

Show.js.erb，当用户点击其中一个文件夹时触发，如下所示:

Show.js.erb, which is triggered when a user clicks on one of their folders, looks like this:

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

它成功注入了部分_contents.html.erb，如下所示:

It successfully injects the partial _contents.html.erb, which looks like this:

    <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 的加载顺序，这不起作用.

I've tested this JavaScript and it works, but when it's injected it is supposed to interact with the divs in the DOM and it doesn't. The divs are in my index.html.erb file, so they're already loaded when this JS is injected. I have tried lots of different things to try and get this working, but alas no luck Any advice? If I try to load something simple like alert() through a partial it works, but I'm guessing this isn't working due to loading order of the DOM and js.

推荐答案

您对 DOM 和 js 的加载顺序是正确的.所以你可以做的是在你的 show.js.erb 中触发一个自定义事件并在你的一个 js 文件中监听该事件并调用 d3JSON(); 在那里.

You're right about the loading order of the DOM and js. So what you can do is trigger a custom event in your show.js.erb and listen to that event in one of your js files and call the d3JSON(); there.

// show.js.erb

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

在您的页面中加载的其中一个 javascript 文件中

In one of your javascript files that is loaded in your page

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

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

And you don't need the d3JSON(); call in your _contents.html.erb.

试试这个.

这篇关于在部分渲染上执行 JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！