Ruby On Rails - 加载视图模板后渲染 HTML

Question

我之前发布了一个类似的问题，但我认为最好先从一个更简单的示例开始，以了解 AJAX 的工作原理。

基本上，该应用程序对 twitter 进行 API 调用并搜索所有在推文文本中包含“@youtube”的推文。问题是有时搜索可能需要一段时间，所以与其等待搜索完成然后渲染视图，我想渲染一个包含空 div 的视图模板，然后在控制器方法完成后用 HTML 填充这个 div正在运行。

到目前为止，这就是我所拥有的：

在 routes.rb

中

Rails.application.routes.draw do
  get '/auth/:provider/callback', to: 'sessions#create'

  root to: 'pages#index'
  get 'index' => 'pages#index'
  get 'tweets' => 'pages#tweets'
end

在 pages_controller.rb

中

class PagesController < ApplicationController

  def tweets
    html = ''
    tweets = TweetController.load_tweets(current_user)
    tweets.each {|tweet| html << "<p>#{tweet.text}</p>"}
    render :html => html.html_safe, :layout => false
  end

end

在 tweet_controller.rb

中

class TweetController < ApplicationController

  def self.load_tweets(auth_user)
    tweets = User.twitter.search('to:youtube', result_type: 'recent').collect.sort_by &:created_at
    return !auth_user.nil? ? tweets : [].to_enum
  end

end

在 tweets.html.erb

中

<script>
  $.ajax({
      url: 'tweets',
      cache: false,
      success: function (html) {
          $('#tweet_view').append(html)
      }
  });
</script>

<div id='tweet_view'></div>

所以用户在索引页面上按下按钮后，他们会被发送到 Twitter API 授权页面，然后重定向回tweets.html.erb。

但是，不是先加载模板然后用 HTML 填充 div，它似乎仍在加载所有推文然后渲染页面，但我不太确定我做错了什么。

Answer 1

实际上有两种方法可以解决这个问题。

1. 使用两个操作：只需将 tweets.html.erb 中的所有内容移动到 pages/index.html.erb

在 pages_controller.rb

中

class PagesController < ApplicationController

  def index
  end 

  def tweets
    html = ''
    tweets = TweetController.load_tweets(current_user)
    tweets.each {|tweet| html << "<p>#{tweet.text}</p>"}
    render :html => html.html_safe, :layout => false
  end

end

在 pages/index.html.erb

   <script>
  $.ajax({
      url: 'tweets',
      cache: false,
      success: function (html) {
          $('#tweet_view').append(html)
      }
  });
</script>

<div id='tweet_view'></div>

在 tweet_controller.rb

中

class TweetController < ApplicationController

  def self.load_tweets(auth_user)
    tweets = User.twitter.search('to:youtube', result_type: 'recent').collect.sort_by &:created_at
    return !auth_user.nil? ? tweets : [].to_enum
  end

end

并确保当用户按下按钮时，页面应该从 Twitter API 授权页面重定向回 pages#index 操作。

编辑或：

1. 使用参数分隔符区分 API 重定向和推文加载请求。

在 pages_controller.rb

中

class PagesController < ApplicationController

  def tweets
    if(params[:load_tweets] == 'true')
     html = ''
     tweets = TweetController.load_tweets(current_user)
     tweets.each {|tweet| html << "<p>#{tweet.text}</p>"}
     render :html => html.html_safe, :layout => false
    end
  end

end

在 pages/tweets.html.erb

   <script>
  $.ajax({
      url: 'tweets?load_tweets=true',
      cache: false,
      success: function (html) {
          $('#tweet_view').append(html)
      }
  });
</script>

<div id='tweet_view'></div>

在 tweet_controller.rb

中

class TweetController < ApplicationController

  def self.load_tweets(auth_user)
    tweets = User.twitter.search('to:youtube', result_type: 'recent').collect.sort_by &:created_at
    return !auth_user.nil? ? tweets : [].to_enum
  end

end