RoR - 使用 Javascript 动态渲染部分答案

【问题标题】：RoR - Rendering a partial dynamically with JavascriptRoR - 使用 Javascript 动态渲染部分
【发布时间】：2013-03-27 20:09:59
【问题描述】：

我目前正在尝试在单击按钮时加载部分内容。所以我要做的是添加一个远程 => true，然后在控制器操作中添加一个 format.js，该操作将转到我执行此操作的 .js.erb 文件：

$('#videospan').html('<%= escape_javascript(render :partial => 'newpartial') %>');

现在videospan 已经有一个不同的部分，现在我要添加这个部分。当涉及到它的 html 部分时，这很好用。现在 newpartial 里面有一些 javascript，不幸的是没有检测到。是因为 html 是在 javascript 之前加载的吗？如何使它对 HTML 可见？我必须在原始的html文件中定义它吗？

谢谢，

其中一种 javascript 方法：

function saveAll()
{
     for(key in storedData){
        storedData[key].push.apply(storedData[key],[$('#'+key).position().top,$('#'+key).position().left]);
    }


    $.getJSON('<%= save_answers2_course_lecture_path(@course, @lecture) %>',{"stored":storedData}, function(resp){
        redirect()
    });
}

所以现在我试图通过将 javascript 添加到 js.erb 来传递它，所以现在我在 js.erb 中有这个：

$('#videospan').html('<%= escape_javascript(render :partial => 'newpartial') %>');
pop = Popcorn.youtube( "#youtube", lec ,{ width: 400, controls: 0});                           
pop.play();

所以我想渲染其中有一个#youtube div 的部分，然后我想使用爆米花向它添加视频。不幸的是，当我添加这 3 行时，甚至渲染都不起作用..

使用 firebug，当我检查返回的响应时，它看起来像这样：

$('#videospan').html(".........");
pop = Popcorn.youtube( "#youtube", http://www.youtube.com/... ,{ width: 400, controls: 0}); 
pop.controls( false );                          
pop.play();

所以一切都发送正确，但怎么不显示呢？

【问题讨论】：

没有检测到newpartial中的javascript是什么意思？
jQuery 不会检测到您传递给#html()的字符串中有javascript代码
@JohnNaegle 我的意思是我在那个部分有一些 javascript 方法。当我打电话给他们时，他们找不到。
@KaiKönig 哦，好吧，还有其他方法可以传递部分代码以及它的 javascript 代码吗？
发布在 newpartial 中定义的 javascript

标签： javascript ruby-on-rails partial-views

【解决方案1】：

您最好将尽可能多的 Javascript 移动到脚本文件中。一种方法是将功能分解为代码与配置数据：将代码放入 .js 文件中，将数据放入 DOM 或变量中：

// Option1 -- Using DOM
// my_function.js
function saveAll() {
  // code code code
  var url = $('#some_dom_element').attr('data-some-attribute-name');

  $.getJSON(url, 'blah blah');
}

# my_template.js.erb
<div id="some_dom_element" data-some-attribute-name="<%= save_answers2_course_lecture_path( @course, @lecture) %>">
</div>

// Option 2 -- Using a variable
// my_function.js
function saveAll() {
  // code code code
  $.getJSON(url, 'blah blah');
}

# my_template.js.erb
var url = '<%= raw(save_answers2_course_lecture_path( @course, @lecture) %>';

【讨论】：

好的，好吧，现在我正在渲染上面的部分，我想从那里访问那个javascript代码。我尝试了使用 .js.erb 建议的方法，但我认为问题出在 .js 文件中。更准确地说，我有一个 onload 方法，需要在渲染此部分时调用。我该怎么做这样做？
如果您正在渲染 javascript，当响应返回时，.js.erb 中的任何内容都会在页面上运行。所以你可以直接把javascript放在模板中，避免onload。
哦，好吧..我试过了..但我不确定为什么它不起作用。我将代码添加到问题中
我没有发现您添加的代码有任何问题。您确定要添加目标元素吗？也许尝试 Firebug 并在控制台中运行 JS？
是的，我用 firebug 进行了检查。没有最后 2 行，部分被渲染了。但是当我添加它们时 .. 它不是 .. 但是要让视频正常工作，我需要这 2 行。 .

【解决方案2】：

万一有人面临某人的问题..这是由于我遇到的一个错误。据此：http://www.alfajango.com/blog/rails-js-erb-remote-response-not-executing/

当 .js.erb 文件中存在错误时，代码会静默失败。要检查错误，只需从 firebug 复制响应，将其发布到命令行并运行它。

【讨论】：