如何使用Ajax一次重新渲染2个以上的部分

时间:2012-12-18 13:58:50

标签: ruby-on-rails ruby-on-rails-3 jquery

我有一个rails应用程序,它由三个部分构成,例如上面的导航,主要内容和侧面菜单。

我已在主要内容中实施了跟随取消按钮 到目前为止,它正在与Ajax完美配合。

基本上如果我按下跟随按钮,将跟随users_controller.rb中的跟随操作并更改跟随标志,然后调用follow.js重新渲染跟随按钮作为部分。
除此之外,在侧边菜单中,它包含current_user所关注的人数 执行以下操作后,也应立即刷新此编号。

一次刷新超过2个部分。我该如何存档?

控制器/ users_controller.rb

....

  def follow
    @user = User.find(params[:id])
    current_user.follow(@user)
    respond_to do |format|
      format.js {render :action=>"follow.js"}
    end
  end

  def unfollow
    @user = User.find(params[:id])
    current_user.stop_following(@user)
    respond_to do |format|
      format.js {render :action=>"unfollow.js"}
    end
  end

...

视图/用户/ follow.js.erb

$('.follow_user[data-user-id="<%=@user.id%>"]').html('<%= escape_javascript(render :partial => "users/follow_user", :locals => {:user => @user}) %>');

视图/用户/ unfollow.js.erb

$('.follow_user[data-user-id="<%=@user.id%>"]').html('<%= escape_javascript(render :partial => "users/follow_user", :locals => {:user => @user}) %>');

视图/布局/ _menu.html.erb

          <% if user_signed_in? %>
                  <li><%= link_to(following_user_path(current_user.username)) do %>
                  <i class="icon-heart"></i>Following
                  <%= '(' + current_user.all_following.count.to_s + ')' if current_user.all_following.count > 0 %>
                  <% end %>
                  </li>    

                  <li><%= link_to(followed_user_path(current_user.username)) do %>
                  <i class="icon-heart"></i>Followed by
                  <%= '(' + current_user.followers.count.to_s + ')' if current_user.followers.count > 0 %>
                  <% end %>
                  </li>
              <% else %>
                  <li><%= link_to sanitize('<i class="icon-heart"></i> ') + "Following", following_user_path %></li>                                            
                  <li><%= link_to sanitize('<i class="icon-heart"></i> ') + "Followed by", followed_user_path %></li>                                           

              <% end %>

3 个答案:

答案 0 :(得分:1)

您可以创建一个render_to_string这两个部分并将其格式化为json对象的新操作:

{
div_id_1: "<ul....." ,
div_id_2: "<div...."
}

答案 1 :(得分:1)

# dedicate partial _following_number.html.erb
<span id="following_number">
  <% if user.followers.count > 0 %>
    <%= '(' + user.followers.count.to_s + ')' %>
  <% end %>
</span>


# update layout with partial:

<li><%= link_to(followed_user_path(current_user.username)) do %>
<i class="icon-heart"></i>Followed by
  <%= render :partial => "following_number", :user => current_user %>
<% end %>

# follow.js.erb && unfollow.js.erb:
...
$(document).find("#following_number").replaceWith('<%= escape_javascript(render("following_number", :user => @user, :formats => [:html])) %>')

帮手更优雅:

def following_number(user)
  user.followers.count > 0 ? "(#{user.followers.count})" : nil
end

# then put spans to layout:
<span id="following_number"><%= following_number(current_user) %></span>

# and js:
$(document).find("#following_number").html('<%= escape_javascript(following_number(@user)) %>')

答案 2 :(得分:0)

执行此操作的一种简单方法是从rails返回.js并让您的视图执行此脚本,该脚本将具有更新/替换视图的操作。

例如,这只是渲染三个部分,稍后使用jQuery替换视图中的内容。让我们说行动是my_action,因此您将以下代码放在my_action.js.erb中:

$("#content_1").html("<%= escape_javascript(render('partial_1'))%>");
$("#content_2").html("<%= escape_javascript(render('partial_2'))%>");
$("#content_3").html("<%= escape_javascript(render('partial_3'))%>");

此示例可以按照您希望或需要的方式进行扩展。您还可以为模型渲染json并调用函数以在视图中更新它们。