javascript 使用 Rails 和 jQuery 在部分中动态呈现视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15694554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically render view in a partial with Rails and jQuery
提问by Zephyr4434
In my app, I have a user profile page that has three tabs and a blank div below it. There is a default tab that is white and two other tabs that are darker and "unselected".
在我的应用程序中，我有一个用户个人资料页面，其中包含三个选项卡和一个空白 div。有一个默认选项卡是白色的，另外两个选项卡颜色较深且“未选中”。
I want to make it so that the content in the div below renders a partial based on which tab is selected.
我想让下面的 div 中的内容根据选择的选项卡呈现部分内容。
I already have it working to the point where jQuery allows me to click on the different tabs and it changes the colors of the tabs without a page refresh.
我已经让它工作到 jQuery 允许我单击不同选项卡的程度，它可以在不刷新页面的情况下更改选项卡的颜色。
However, I am stuck on how to get the partial to render correctly. Any thoughts on this? I am stuck on how to dynamically call a partial based on which tab is selected in the jQuery and actually am not sure if I need another file to interact with this to make it work. I am relatively new to jQuery in a rails app so I am not sure if I've done everything I need to.
但是，我被困在如何正确渲染部分。对此有何想法？我被困在如何根据在 jQuery 中选择的选项卡动态调用部分，实际上不确定我是否需要另一个文件与之交互以使其工作。我对 Rails 应用程序中的 jQuery 比较陌生，所以我不确定我是否已经完成了我需要做的一切。
User profile page: app > views > show.html.erb
用户个人资料页面：应用程序 > 视图 > show.html.erb
<ul class="profile-tabs">
<%= link_to "<li class=\"tab selected\">Tab 1</li>".html_safe, userprofile_users_path, remote: true %>
<%= link_to "<li class=\"tab\">Tab 2</li>".html_safe, userprofile_users_path, remote: true %>
<%= link_to "<li class=\"tab\">Tab 3</li>".html_safe, userprofile_users_path, remote: true %>
</ul>
<div id="profile-content">
<!--content goes here -->
</div>
jQuery: app > assets > javascripts > userprofile.js
jQuery：应用程序 > 资产 > javascripts > userprofile.js
$(function() {
$("li.tab").click(function(e) {
e.preventDefault();
$("li.tab").removeClass("selected");
$(this).addClass("selected");
$("#profile-content").html("<%= escape_javascript(render partial:
"How can I make this partial name be generated based on the value of the selected li?")%>");
});
});
Users Controller: app > controllers > users_controller.rb
用户控制器：应用程序 > 控制器 > users_controller.rb
class UsersController < ApplicationController
def show
@user = User.find(params[:id])
end
def userprofile
respond_to do |format|
format.js
end
end
end
There are three partials corresponding to the three tabs, and I need the jQuery to somehow dynamically change the partial being called based on the selected tab.
三个部分对应于三个选项卡，我需要 jQuery 以某种方式动态更改基于所选选项卡调用的部分。
I'd really appreciate some help with this, or if there is another resource that can answer my question. I have not been able to find anything that directly answers what I am trying to do.
我真的很感激这方面的一些帮助，或者如果有其他资源可以回答我的问题。我一直无法找到任何直接回答我想要做的事情的东西。
Update ------
更新 - - -
I used the solution provided rails_has_elegance but nothing is appearing in the div I am targeting. However, I am seeing this in the rails server output, which seems like it is doing what I want:
我使用了 rails_has_elegance 提供的解决方案，但我定位的 div 中没有出现任何内容。但是，我在 rails 服务器输出中看到了这一点，这似乎是我想要的：
Started GET "/users/currentoffers" for 127.0.0.1 at 2013-03-28 21:20:01 -0500
Processing by UsersController#currentoffers as JS
Rendered users/_offers.html.erb (0.1ms)
Rendered users/currentoffers.js.erb (0.8ms)
Completed 200 OK in 4ms (Views: 3.7ms | ActiveRecord: 0.0ms)
[2013-03-28 21:20:01] WARN Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
回答by rails_has_elegance
If you want to avoid a lot of parameters, just make 3 different actions in your controller, one for each tab, which each respond to js. Then create a [action].js.erb for each action in the views with something like this:
如果你想避免很多参数，只需在你的控制器中做 3 个不同的动作，每个选项卡一个，每个动作响应 js。然后为视图中的每个动作创建一个 [action].js.erb，如下所示：
$("#tab_content").html("<%= escape_javascript(render('tab1')) %>");
You actually need to communicate with the server through a ajax request, whereas your onclick function would preload that partial and you don't have anything remote anymore.
您实际上需要通过 ajax 请求与服务器通信，而您的 onclick 函数会预加载该部分，并且您不再有任何远程内容。
回答by Kushal
write an action in a controller having three conditions for 3 different tabs. call ajax by clicking on any tab, pass identity parameter say 'tab1' or 'tab2' or 'tab3' and also required parameters if you need. in controller, get parameters and call model function which contains actual business logic.
在控制器中编写一个动作，该动作具有 3 个不同选项卡的三个条件。通过单击任何选项卡调用 ajax，传递身份参数，例如“tab1”或“tab2”或“tab3”，如果需要，还需要参数。在控制器中，获取参数并调用包含实际业务逻辑的模型函数。
get result in a controller and just render partial in a div below all 3 tabs using js.erb
在控制器中获得结果，并使用 js.erb 在所有 3 个选项卡下方的 div 中渲染部分
