jquery - 如何在rails中异步加载部分页面

Question

在创建 ruby​​ on Rails/jquery 应用程序时，页面的一部分生成起来非常耗时。

我想改变页面的加载方式，让大部分页面立即加载，并为耗时的部分保留一个占位符异步加载，并在加载时用ajax/jquery注入(inject)到页面中完成了。

我现在拥有的(简化):

app/views/sample/show.html.erb:

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

并且该部分将使用一些部分@org来生成一些内容(点击另一个外部REST服务)。

app/views/sample/_calculate.html.erb

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

我意识到这可能违反了正确的 MVC 架构规则，因为我的部分似乎有太多逻辑，并且也想清理它......

所以我想我有两个问题:(1)如何让它工作，(2)我应该如何清理它以遵循良好的 ruby​​/rails/mvc 实践？

Answer 1

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

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

然后在页面中添加一些 jQuery

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

并让响应/elephants/dancing/pink 的操作返回您想要填充 div 的 HTML Blob 。在 AJAX 请求调用的操作中，您需要使用 :layout => false 进行渲染，以防止返回的 HTML blob 包含整个框架。例如

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

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