Rails 3 在 JS 文件中渲染一个部分答案

【问题标题】：Rails 3 Render a partial in a JS fileRails 3 在 JS 文件中渲染一个部分
【发布时间】：2014-12-16 19:18:44
【问题描述】：

我有一个 Rails 3 应用程序，它通过资产管道提供一个 js 文件，例如 tools.js.erb。这工作正常，但我想添加一些 html 模板，这些模板可作为环境中的部分使用。

一种选择是在需要模板时通过 JS 的 ajax 调用加载模板，但这会增加在客户端上呈现模板的延迟。

是否可以在 JS 中渲染部分内容并将其作为字符串存储在 JS 变量中，这样我就可以立即注入 html。最好的方法是什么？

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-3 partials

【解决方案1】：

是的，你可以这样做：

var container = $("#your_container");
var myPartial = "<%= j render( :partial => 'directory/your_partial' ) %>";

// on.click, or whatever...
container.prepend(myPartial);

不确定您是要添加还是替换 HTML，但这应该能让您走上正轨。很好的调用将部分标记保存在 Javascript 变量中。应该加快速度。

【讨论】：

尼克，感谢您的回复。我得到这个。 throw Error("NoMethodError: undefined method `render' for #:0x000039cfb2c740>\n
我在变量声明后漏掉了一个分号。
我正在使用这样的东西。 const test = " 'test', :locals => {:problem_types => Rails.application.config.problem_types}) %>";但是好像不行，抛出我之前加的错误。
尝试将其设为 var。如果这不起作用，我不知道。它适用于我的一个应用程序。
谢谢尼克，我不认为 const 是问题，我也尝试了 var 但它没有改变任何东西。我相信你的实现是正确的，但我错过了一些我无法指出的愚蠢的东西。

【解决方案2】：

您要添加/更新的 HTML 需要一些变量，无论如何您都必须进行服务器访问并重新加载您的 dom。否则如果是静态内容，可以按照这个方法。只需像这样在您的操作中创建一个变量。

@my_view_content = render_to_string partial: 'path_to_partial', formats: ['html'], layout: false, object: something

现在，您可以使用此变量或将此变量传递给您的 JS 文件。

var my_view_content_string = = "#{@my_view_content}"

【讨论】：

【解决方案3】：

如果您没有什么好的选择，为什么要将视图存储在变量中..为什么不能使用条件..例如show.js.erb

<% if condition %>

  $('#div1').html("<%= escape_javascript(render(:partial => 'pages/show')) %>");

<%else%>

  $('#div1').html("<%= escape_javascript(render(:partial => 'users/show')) %>");

<%end%>

否则，这是另一种方法......

###check of a condition in your view and then add element and call ajax

   <%if current_user.sign_in_count == 1 && current_user.confirmed?  %>
            <%= hidden_field(:new_user, :first_login, :value => current_user.sign_in_count)%>
  <%end%>    



  <script type="text/javascript">
$(document).ready(function() {
 //check if element is present in the dom and then call ajax
  if ($('#new_user_first_login').length) {
        $.ajax({
          //CALL AJAX
        })

  }
  })//document ends
 </script>

【讨论】：