javascript - 使用 Ajax 渲染部分集合

Question

我认为我的 javascript 可以工作，但现在它没有加载内容。只是一个空白。我目前在 create.js.erb 中有这个

$('#pit_form').remove(); //remove form
$('#new_link').show();  //show new link again
$('#pit_index').append("<%= j (render :partial => 'pits/pit', :collection => @pits) %>")

我还在pits_controller 的创建操作中添加了@pits。

Controller

class PitsController < ApplicationController
  before_action :current_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy

def new
  @pit = Pit.new
end

def index
  @pit = Pit.all
  @user = User.find_by(params[:id])
  @pits = Pit.paginate(:page => params[:page]).order('created_at DESC').group_by { |pit| pit.created_at.strftime("%B %Y") }
end




def create
    @pit = current_user.pits.create(pit_params)
    @pits = Pit.paginate(:page => params[:page]).order('created_at DESC').group_by { |pit| pit.created_at.strftime("%B %Y") }  
      respond_to do |format|
        format.html { redirect_to @pit}
        format.js
  end
end



def show
  @pit = Pit.find(params[:id])
end

def edit
end

def update
   @pit = Pit.find(pit_params[:id])
     if @pit.update_attributes(pit_params)
       redirect_to @pit
     end
end

def destroy
  @pit = Pit.find(params[:id])
  @pit.destroy
end


def upvote
  @pit = Pit.find(params[:pit_id])
  @pit.upvote_from current_user
  redirect_to pit_path(@pit)
end

def downvote
  @pit = Pit.find(params[:pit_id])
  @pit.downvote_from current_user
  redirect_to pit_path(@pit)
end


private

def correct_user
    @pit = current_user.pits.find_by_id(params[:id])
    redirect_to root_path if @pit.nil?
  end

def pit_params
    params.require(:pit).permit(:topic, :summary, :image, :video_url, :author, :user_id)
end

end

我的日志显示正在加载内容，但只显示了一个大空白。

日志

Started POST "/pits" for 127.0.0.1 at 2014-09-03 13:43:20 -0500
Processing by PitsController#create as JS
  Parameters: {"utf8"=>"✓", "pit"=>{"topic"=>"test", "author"=>"test", "summary"=>"test", "video_url"=>""}, "commit"=>"Start Pit"}
  User Load (0.4ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  ORDER BY "users"."id" ASC LIMIT 1
   (0.1ms)  begin transaction
  SQL (0.4ms)  INSERT INTO "pits" ("author", "created_at", "summary", "topic", "updated_at", "user_id", "video_url") VALUES (?, ?, ?, ?, ?, ?, ?)  [["author", "test"], ["created_at", "2014-09-03 18:43:20.845193"], ["summary", "test"], ["topic", "test"], ["updated_at", "2014-09-03 18:43:20.845193"], ["user_id", 1], ["video_url", ""]]
   (1.2ms)  commit transaction
  Pit Load (0.3ms)  SELECT  "pits".* FROM "pits"   ORDER BY created_at DESC LIMIT 30 OFFSET 0
  Rendered pits/_pit.html.erb (0.0ms)
  Rendered pits/create.js.erb (2.2ms)
Completed 200 OK in 23ms (Views: 5.8ms | ActiveRecord: 2.3ms)

根据我的搜索，似乎将 @pits 添加到创建操作可以解决其他答案的问题，但不能解决我的问题。希望得到一些帮助。

我的index.html.erb

<div class = "container list-pits", id = "pit_index"> 
  <%= link_to "Add New Pit", new_pit_path, id: "new_link", remote: true, class: "btn btn-default" %>
  <br>
  <br>
  <% @pit.each do |pit| %>

  <div class = "container">
    <div class = "well"> 
       <h3 id="pit-title"><%= link_to pit.topic, pit_path(pit) %></h3>
       <p>by <%= link_to pit.author, '#' %></p>
          <br>
            <p><%= pit.summary %></p>
            <p>Replies (<%= pit.comments.count %>)</p>
          <br>

            <p>Pit Created by: <%= link_to pit.user.name, pit.user %> on <%= pit.created_at %></p>

            <%= link_to "View Pit", pit_path(pit), class: "btn btn-primary" %>
            <%= link_to "Delete Pit", pit_path(pit), remote: true, method: :delete, data: { confirm: 'Are you sure?' }  %>
      </div>
    </div>
      <% end %>
  </div>

_pit.html.erb

<

div class = "container list-pits", id = "pit_index"> 
  <%= link_to "Add New Pit", new_pit_path, id: "new_link", remote: true, class: "btn btn-default" %>
  <br>
  <br>
  <% @pit.each do |pit| %>

  <div class = "container">
    <div class = "well"> 
       <h3 id="pit-title"><%= link_to pit.topic, pit_path(pit) %></h3>
       <p>by <%= link_to pit.author, '#' %></p>
          <br>
            <p><%= pit.summary %></p>
            <p>Replies (<%= pit.comments.count %>)</p>
          <br>

            <p>Pit Created by: <%= link_to pit.user.name, pit.user %> on <%= pit.created_at %></p>

            <%= link_to "View Pit", pit_path(pit), class: "btn btn-primary" %>
            <%= link_to "Delete Pit", pit_path(pit), remote: true, method: :delete, data: { confirm: 'Are you sure?' }  %>
      </div>
    </div>
      <% end %>


 </div>

根据一些建议，我在我的 _pit 部分中扔了上面同样的东西。谢谢。

Answer 1

收藏

为了给您提供更进一步的范围，collection partial 的参数助手基本上取代了 .each你的方面partial 。重要的一点是，您需要记下您要调用的本地对象 with the as: argument :

To use a custom local variable name within the partial, specify the :as option in the call to the partial:

<%= render partial: "product", collection: @products, as: :item %>

With this change, you can access an instance of the @products collection as the item local variable within the partial.

这意味着如果您使用 collection 渲染部分内容，您需要确保它具有相邻的 as:方法为您提供正确的局部变量名称。此外，如Ruby Racer在他的回答中概述，您应该只使用 collection数据集合的参数:

#app/views/pits/create.js.erb
$('#pit_index').append("<%= j (render :partial => 'pits/pit', collection: @pits, as: :pit) %>")

这将加载pit部分就像您调用 @pits.each do |pit| 一样，这意味着您将能够使用以下内容:

#app/views/pits/_pit.html.erb
<div class = "container list-pits", id = "pit_index">     
  <div class = "container">
    <div class = "well"> 
       <h3 id="pit-title"><%= link_to pit.topic, pit_path(pit) %></h3>
       <p>by <%= link_to pit.author, '#' %></p>
          <br>
            <p><%= pit.summary %></p>
            <p>Replies (<%= pit.comments.count %>)</p>
          <br>

            <p>Pit Created by: <%= link_to pit.user.name, pit.user %> on <%= pit.created_at %></p>

            <%= link_to "View Pit", pit_path(pit), class: "btn btn-primary" %>
            <%= link_to "Delete Pit", pit_path(pit), remote: true, method: :delete, data: { confirm: 'Are you sure?' }  %>
      </div>
    </div>
</div>

<小时/>

修复

您有几个问题(我在上面已解决)，即您正在使用 @pit在你的部分里面。

@pit是一个实例变量，这意味着它只能在 Controller 中设置。如果您使用局部变量，您将调用本地变量，它们的作用域与 @instance 明显不同。变量。

查看您的日志，似乎您的partial正在被调用，但您使用 @pit.each可能只是造成空白。我的建议解决了这个问题