如何在rails中asynchronous加载部分页面

在rails / jquery应用程序中创build一个ruby,有一个页面的一部分是耗时生成。

我想改变页面的加载方式,这样大部分的页面就会被加载,并且占位符被保留用于asynchronous加载的耗时部分,并在完成时用ajax / jquery注入到页面中。

我现在拥有的(简体):

应用程序/视图/样品/ show.html.erb:

<div id="theResult"> <%= render :partial => 'calculate', :object => @org) %> </div> 

部分将使用某些部分@org来生成一些内容(打另一个外部REST服务)。

应用程序/视图/样品/ _calculate.html.erb

 <% # code to take org and turn it into content %> <!--...html to display results here --> 

我意识到这可能是违反适当的MVC架构规则,因为我的部分似乎有太多的逻辑,并希望清理,以及…

所以我想我有两个问题:(1)我如何得到这个工作,以及(2)我应该如何清理这个以遵循好的ruby / rails / mvc实践?

首先在主响应中放置一个空的占位符div

 <div id="pink-dancing-elephants"></div> 

然后在页面中添加一点jQuery

 $.ajax({ url: "/elephants/dancing", cache: false, success: function(html){ $("#pink-dancing-elephants").append(html); } }); 

并有响应/大象/舞蹈/粉红色的行动返回你想填补div的HTML blob。 在由AJAX请求调用的操作中,您将需要使用以下命令进行呈现:layout => false,以使返回的BLOB blob包含整个框架。 例如

 # elephants_controller.rb def dancing @elephants = #whatever render :layout => false end 

这将在views / elephants / dancing.html.erb中呈现模板。

与@cailinanne相比,有一个更简单的方法。

使用她的同样的例子,但我倾向于使用这种技术来更新一个div,所以我的div首先会有这样的部分:

 <div id="pink-dancing-elephants"> <%= render "elephants/dancing", elephant: some_thing %> </div> 

但是,然后使用jQuery加载方法:

 $("#pink-dancing-elephants").load("/elephants/dancing"); 

这将返回整个部分。 确保使用布局:false,并可以select设置参数。 我倾向于使用这样的部分

 # elephants_controller.rb def dancing render "elephants/_dancing", locals: { elephant: some_thing }, layout: false end 

这将在views / elephants / _dancing.html.erb中渲染模板。

注意控制器方法的部分名称中的下划线,以及在视图中调用渲染时不如何使用它。