javascript - 将部分 View 注入(inject) div 标签

Question

我有一种情况，我想根据按钮单击动态更改一个 div 标签的内容。对于每个按钮单击，我想注入(inject)一些 html.erb 部分。

为什么这样的方法不起作用:

$('#my_div').append '<%= escape_javascript(render("shared/my_partial")) %>'

我的部分采用以下格式:_my_partial.html.erb

感谢您的帮助。

Answer 1

好的，这里有几个问题:

1. 您没有约束您的 div替换一个事件？
2. 您正在使用ERB代码 front-end javascript(仅适用于 ajax 调用)

<小时/>

For each button click I would like to inject some html.erb partial

这里有两个选项是通过ajax调用部分。 (仅在您有动态部分时推荐)或在 helper 中预加载部分方法什么的...

我将详细介绍这两种方法。

--

Ajax

如果您的部分具有动态内容(IE 中填充有变量或类似内容)，则您需要通过 Ajax 传递请求。

原因是 Ruby 只能处理 <%= ERB %>服务器上的代码。由于 Javascript 是客户端，因此您必须使用 ajax 将异步请求传递到服务器，服务器将为您渲染 JS。

Rails UJS介绍了remote标签 - 这消除了这个过程中的很多麻烦:

#app/view/controller/your_current_view.html.erb
<%= link_to "your post", your_current_view_path, remote: true %>

#app/controllers/controller.rb
class Controller < ApplicationController
   respond_to :js, :html #-> will need the responders gem after Rails 4

   def your_current_view_path
      ....
   end
end

这将允许您使用以下js.erb来自服务器的文件:

#app/views/controller/your_current_view.js.erb
$('#my_div').append('<%=j render "shared/my_partial" %>');

这将允许您使用部分和任何 @instance_variables您在操作中设置。

--

独立 JS

如果您的partial是“静态”(不需要任何动态数据)，您将能够使用以下内容:

#app/views/controller/your_current_view.html.erb
<%= content_tag :div, class: "hidden" do %>
   <%= render "shared/my_partial" %>
<% end %>

这将允许您使用以下 JS:

#app/assets/javascripts/application.js
$("a.link").on("click", function(e){
   e.preventDefault();
   hidden = $(".hidden").html();
   $("div").html(hidden);
});