jQuery 如何在rails中异步加载部分页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6701623/
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
How to asynchronously load a partial page in rails
提问by Krease
In creating a ruby on rails / jquery app, there's a part of a page that is time-consuming to generate.
在创建 ruby on rails / jquery 应用程序时，页面的一部分生成起来很耗时。
I want to change how the page is loaded so that most of the page loads right away, and a placeholder is reserved for the time-consuming part to load asynchronously, and be injected into the page with ajax / jquery when it is finished.
我想改变页面的加载方式，以便大部分页面立即加载，并为耗时的部分保留一个占位符以异步加载，并在完成时使用ajax/jquery注入页面。
What I have now (simplified):
我现在拥有的（简化）：
app/views/sample/show.html.erb:
应用程序/视图/样本/show.html.erb：
<div id="theResult">
<%= render :partial => 'calculate', :object => @org) %>
</div>
and the partial will use some parts @org to generate some content (hitting another external REST service).
部分将使用一些部分@org 来生成一些内容（点击另一个外部 REST 服务）。
app/views/sample/_calculate.html.erb
app/views/sample/_calculate.html.erb
<%
# code to take org and turn it into content
%>
<!--...html to display results here -->
I realize this is probably breaking proper MVC architecture rules since my partial seems to have too much logic, and would like to clean that up as well...
我意识到这可能违反了正确的 MVC 架构规则，因为我的部分似乎有太多逻辑，并且也想清理它......
So I guess I have two questions in one: (1) how do I get this to work, and (2) how should I clean this up to follow good ruby/rails/mvc practices?
所以我想我有两个问题合二为一：（1）我如何让它工作，以及（2）我应该如何清理它以遵循良好的 ruby/rails/mvc 实践？
回答by cailinanne
First put an empty, placeholder div in the main response
首先在主响应中放置一个空的占位符 div
<div id="pink-dancing-elephants"></div>
and then add a little jQuery to the page
然后在页面中添加一点 jQuery
$.ajax({
url: "/elephants/dancing",
cache: false,
success: function(html){
$("#pink-dancing-elephants").append(html);
}
});
and have the action that responses to /elephants/dancing/pink return the blob of HTML that you want to have fill up the div. In the action that is invoked by the AJAX request, you'll want to render with :layout => false to keep the returned blob of HTML from including the entire frame. E.g.
并让响应 /elephants/dancing/pink 的操作返回您想要填充 div 的 HTML 块。在 AJAX 请求调用的操作中，您需要使用 :layout => false 进行渲染，以防止返回的 HTML blob 包含整个框架。例如
# elephants_controller.rb
def dancing
@elephants = #whatever
render :layout => false
end
This would render the template in views/elephants/dancing.html.erb.
这将在 views/elephants/dancing.html.erb 中呈现模板。
回答by justingordon
There's a simpler way to do it compared to @cailinanne.
与@cailinanne 相比，有一种更简单的方法。
Using her same example, but I tend to use this technique to update a div, so my div would first have that partial:
使用她相同的示例，但我倾向于使用这种技术来更新 div，因此我的 div 将首先具有该部分：
<div id="pink-dancing-elephants">
<%= render "elephants/dancing", elephant: some_thing %>
</div>
But then use the jQuery load method:
但是然后使用 jQuery 加载方法：
$("#pink-dancing-elephants").load("/elephants/dancing");
This will return the whole partial. Be sure to use layout: false, and optionally set params. I tend to use a partial like this
这将返回整个部分。请务必使用 layout: false，并可选择设置 params。我倾向于使用这样的部分
# elephants_controller.rb
def dancing
render "elephants/_dancing",
locals: { elephant: some_thing },
layout: false
end
This would render the template in views/elephants/_dancing.html.erb.
这将在 views/elephants/_dancing.html.erb 中呈现模板。
NOTE the underscore in the partial name for the controller method and how you don't use it when calling render in the view.
注意控制器方法的部分名称中的下划线以及在视图中调用渲染时如何不使用它。
