我有一些 JavaScript 代码,我想在用户单击其中一个文件夹后执行这些代码——它会触发 show 操作和 show.js.erb,后者会呈现部分内容。
Show.js.erb,当用户点击其中一个文件夹时触发,如下所示:
$("body").append( "<%=j render :partial => 'contents', :locals => {:folder => @folder } %>" );
它成功注入(inject)了部分 _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,它可以工作,但是当它被注入(inject)时,它应该与 DOM 中的 div 交互,但它没有。 div 在我的 index.html.erb 文件中,因此在注入(inject)此 JS 时它们已经加载。我尝试了很多不同的方法来尝试使它正常工作,但是可惜没有运气有什么建议吗?如果我尝试通过部分加载一些简单的东西,比如 alert()
,它可以工作,但我猜这不会工作,因为 DOM 和 js 的加载顺序。
最佳答案
您对 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();
。
试一试。
关于javascript - 在部分渲染上执行 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18026998/