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 - 在頁面加載後呈現部分內容

回答

相關問題