Question

我正在开发一个调用Twitter和Spotify API的应用程序。用户通过Twitter进行身份验证后，会将其重定向到playlist.erb，这是回调网址。

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

完整加载looks like this后的当前playlist.erb页面。

我的问题是，有没有办法可以先渲染页面，然后获取每个推文的部分内容，一次渲染一个，   在加载时为每条推文添加一个新行？

我已经读到我应该使用一种名为AJAX的东西，但我不确定在这里实现的确切方法。

另外，我知道我的观点可以在CSS重构方面使用修复，而不使用已弃用的<center></center> HTML标记。我应该使用适当的MVC来完成系统的整个重构。

在playlist.erb中，通过TweetsController调用Twitter API以查找页面中的所有推文。然后，在调用_tweet.erb时，new_tweet(tweet.text)部分将针对每条推文呈现给此视图。此方法调用Spotify API以查找有关推文中提到的歌曲的详细信息。

new_tweet是一个名为playlist_helper.rb的帮助器中的方法。

load_tweets是名为tweets_controller.rb的控制器中的方法。

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

playlist.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 %>

_tweet.erb部分只会为每首歌添加一个新行。

_tweet.erb

<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>

Answer 1

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

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

.... ....

<script>
$( document ).ready(function() {
    // call the controller function here
});
</script>

在控制器方法中添加

.... ....

respond_to do |format|
     format.js
  end

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

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

Ruby On Rails - 在页面加载后渲染部分内容

1 个答案: