Ruby On Rails - 在页面加载后呈现部分内容

我正在研究一些调用Twitter和Spotify API的应用程序。在用户使用twitter进行身份验证后，他们被重定向到playlist.erb这是回调URL。Ruby On Rails - 在页面加载后呈现部分内容

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

当前playlist.erb页满载后looks like this。

我的问题是，有没有我可以先渲染页面的方式，然后得到每个individial鸣叫渲染一次一个谐音，添加一个新行，因为它加载每个鸣叫？

我读过，我应该使用一种叫做AJAX的东西，但我不确定在这里如何实现它。

另外我知道我的观点可以使用固定的CSS重构方面，而不使用过时的<center></center> HTML标签。我应该使用合适的MVC对系统进行整个重构。

在playlist.erb，到Twitter API的调用是通过TweetsController以发现从页面的所有鸣叫。当new_tweet(tweet.text)被调用时，_tweet.erb部分被渲染到每个推文的这个视图。此方法会调用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/'[email protected] %></h5> 
    </div> 
    </td> 
    <td class='tweet_column'> 
    <div class='tablerow'> 
     <h5><%[email protected]_name%></h5> 
    </div> 
    </td> 
    <td class='tweet_column'> 
    <div class='tablerow'> 
     <h5><%[email protected]%></h5> 
    </div> 
    </td> 
    <td class='tweet_column'> 
    <div class='tablerow'> 
     <h5><%[email protected]%></h5> 
    </div> 
    </td> 
</tr>

来源

2017-03-07 office_boy

Possib乐如何重复[如何在rails中异步加载部分页面]（http://stackoverflow.com/questions/6701623/how-to-asynchronously-load-a-partial-page-in-rails） –

变化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") %>')

来源

2017-03-07 14:30:37

Ruby On Rails - 在页面加载后呈现部分内容

回答

相关问题