Ruby On Rails - 부분 페이지로드 후 렌더링하기

나는 Twitter 및 Spotify API에 대한 호출을하는 응용 프로그램을 만들고 있습니다. 사용자가 트위터로 인증 된 후에는 콜백 URL 인 playlist.erb으로 리디렉션됩니다.Ruby On Rails - 부분 페이지로드 후 렌더링하기

내 문제는페이지가 렌더링하는 데 시간이 걸리는 이유는 먼저 사용자 Twitter 페이지에있는 모든 트윗을 가져와 호출해야하기 때문에 노래/아티스트에 대한 정보를 찾은 다음 Spotify API를 사용하여 사용자가 지정한 정보와 가장 가까운 노래를 검색합니다. 각 트윗에 대해 이렇게하는 것은 꽤 오래 걸립니다. 10 개의 트윗 일 경우 가끔 5-10 초 정도 걸립니다. 한도는 총 50 개의 트윗입니다.

현재 페이지가 완전히로드 된 후 looks like this입니다.

내 질문은 내가 먼저 페이지를 렌더링 할 수있는 방법이있다, 그 다음 한 번에 하나의 렌더링 각 individial 트윗에 대한 부분 지문이 는이로드 각각의 트윗에 대한 새 행을 추가하는거야?

나는 AJAX라는 것을 사용해야한다는 것을 읽었지만 정확히 여기 구현하는 방법을 잘 모르겠습니다.

또한 내 견해가 CSS 리팩터링의 관점에서 수정을 사용하고 더 이상 사용되지 않는 <center></center> HTML 태그를 사용할 수 없다는 것을 알고 있습니다. 그리고 아마도 적절한 MVC를 사용하여 시스템의 전체 리팩터링을 수행해야합니다. playlist.erb에서

은 트위터 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 파일의 비동기 적으로 부분 페이지를 레일에로드하는 방법 (http://stackoverflow.com/questions/6701623/how-to-asynchronously-load-a-partial-page-in-rails) –

변경 playlist.erb

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

playlist.html.erb 에 .... ....

<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 - 부분 페이지로드 후 렌더링하기

답변

관련 문제