Ruby on rails RubyonRails-在页面加载后呈现部分

我正在开发一个可以调用Twitter和Spotify API的应用程序。用户通过twitter进行身份验证后，他们将被重定向到

playlist.erb

，这是回调url

我的问题是，

playlist.erb

页面需要一段时间才能呈现，因为首先我们必须调用以获取在用户Twitter页面上找到的所有推文，然后尝试查找有关歌曲/艺术家的信息，然后使用Spotify API搜索最接近用户指定信息的歌曲。为每条tweet执行此操作需要相当长的时间。对于10条推文，有时需要5-10秒。限制总共是50条推文

当前

playlist.erb

页面在完全加载后显示

我的问题是，有没有一种方法可以让我先渲染页面，然后让每个独立tweet的片段一次渲染一个， 在每个tweet加载时为其添加新行

我已经读到应该使用AJAX，但我不确定如何在这里实现它

另外，我知道我的视图可以在CSS重构方面使用修复，而不使用不推荐的

HTML标记。我可能应该使用适当的MVC对系统进行整体重构

---

在playlist.erb中，通过TweetsController调用Twitter API以查找页面中的所有推文。调用

new\u tweet（tweet.text）

时，每个tweet的

\u tweet.erb

部分将呈现到此视图中。此方法调用Spotify API以查找tweet中提到的歌曲的详细信息

new\u tweet

是名为

playlist\u helper.rb的助手中的一种方法

load\u tweets
是名为
tweets\u controller.rb的控制器中的一种方法

我意识到这是一个相当多的逻辑放在一个视图，这就是为什么页面需要相当长的时间来加载我猜

播放列表.erb

<% loaded_tweets = TweetsController.load_tweets(current_user) %>
<% if loaded_tweets.any? %>
  <table class='tweet_view'>
    <thead>
      <tr class='tweet_row'>
        <th class="fixed_cover"><div class='tableheader'><h6 style='color:white'>Cover</h6></div></th>
        <th class="fixed_spotify"><div class='tableheader'><h6 style='color:white'>Spotify</h6></div></th>
        <th class="fixed_title"><div class='tableheader'><h6 style='color:white'>Track title</h6></div></th>
        <th class="fixed_artist"><div class='tableheader'><h6 style='color:white'>Artist</h6></div></th>
        <th class="fluid"><div class='tableheader'><h6 style='color:white'>Album</h6></div></th>
      </tr>
    </thead>
    <tbody>
      <% loaded_tweets.reverse_each.each do |tweet| %>
        <%=new_tweet(tweet.text)%>
      <% end %>
    </tbody>
  </table>
<% else %>
    <center>
      <p><h8><b>No tweets found!</b></h8></p>
    </center>
<% end %>

<tr class='tweet_row'>
  <td class='tweet_column'>
    <div class='tablerow#cover'>
      <%= image_tag(@cover,:class => 'album_cover')%>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow#spotify'>
      <h5><%= link_to image_tag('spotify', :class => 'spotify_image'), 'https://open.spotify.com/track/'+@spotify %></h5>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow'>
      <h5><%=@track_name%></h5>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow'>
      <h5><%=@artist%></h5>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow'>
      <h5><%=@album%></h5>
    </div>
  </td>
</tr>

<div id="tweets">
    <%= render 'tweet') %>
</div>

将playlist.erb更改为playlist.html.erb

<% loaded_tweets = TweetsController.load_tweets(current_user) %>
<% if loaded_tweets.any? %>
  <table class='tweet_view'>
    <thead>
      <tr class='tweet_row'>
        <th class="fixed_cover"><div class='tableheader'><h6 style='color:white'>Cover</h6></div></th>
        <th class="fixed_spotify"><div class='tableheader'><h6 style='color:white'>Spotify</h6></div></th>
        <th class="fixed_title"><div class='tableheader'><h6 style='color:white'>Track title</h6></div></th>
        <th class="fixed_artist"><div class='tableheader'><h6 style='color:white'>Artist</h6></div></th>
        <th class="fluid"><div class='tableheader'><h6 style='color:white'>Album</h6></div></th>
      </tr>
    </thead>
    <tbody>
      <% loaded_tweets.reverse_each.each do |tweet| %>
        <%=new_tweet(tweet.text)%>
      <% end %>
    </tbody>
  </table>
<% else %>
    <center>
      <p><h8><b>No tweets found!</b></h8></p>
    </center>
<% end %>

<tr class='tweet_row'>
  <td class='tweet_column'>
    <div class='tablerow#cover'>
      <%= image_tag(@cover,:class => 'album_cover')%>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow#spotify'>
      <h5><%= link_to image_tag('spotify', :class => 'spotify_image'), 'https://open.spotify.com/track/'+@spotify %></h5>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow'>
      <h5><%=@track_name%></h5>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow'>
      <h5><%=@artist%></h5>
    </div>
  </td>
  <td class='tweet_column'>
    <div class='tablerow'>
      <h5><%=@album%></h5>
    </div>
  </td>
</tr>

<div id="tweets">
    <%= render 'tweet') %>
</div>

在视图文件夹中再创建一个文件，如action_name.js.erb并添加

$('#tweets').html('<%= j(render "tweet") %>')

$（'#tweets'）.html（''）