javascript - Rails 3 : Link that puts user information a specific section of to the current page, 没有刷新？

Question

我是 Ruby on Rails/Javascript 新手 - 所以请保持温柔。 (使用 Rails 3、Jurby、Ruby 1.8.6)

我想创建一个功能，将信息呈现到当前页面，但在不同的部分中，当单击链接时，就像扩展用户的详细信息一样，而不必转到该特定用户的个人资料。

目前，我的示例会将当前用户带到链接的用户个人资料，但我希望信息显示在用户源的右侧。 (我会包括一个屏幕抓取，但我没有足够高的代表)。想象一下，页面右侧有一个用户帖子提要，显示每个用户的所有全局帖子。当从相关帖子中单击用户名时，左侧应该是一个信息框，其中填充了用户的摘要。

目前，我的views/pages/home.html.erb(渲染名为signed_in的部分)

<div class="article_feed">
    <div class="article_snippet">
        <%= form_for(@micropost) do |f| %>
            <%= render 'shared/error_messages', object: f.object %>
            <div class="field">
                <%= f.text_area :content, placeholder: "Got anything to say...?" %>
            </div>
                <%= f.submit "Post", class: "btn btn-large btn-primary" %>
        <% end %>   
        Communicator.. (<%= Micropost.count %>)
    </div>

    <% @microposts.each do |mp| %>
        <div class="article_snippet">               
            <%= render mp %>
        </div>
    <% end %>
    <%= will_paginate @microposts%>     
</div>  

<div class="comments_feed">
    <div class ="comments_snippet">
        <!-- this is where I want information to be displayed, once
                a link has been clicked --> 
    </div>
</div>

我的主页 Controller 方法

  def home
      @micropost = current_user.microposts.build if signed_in?
      @microposts = Micropost.paginate(page: params[:page], 
              :per_page => 4).order('id DESC') if signed_in?
  end

用户用他们自己的模型、 Controller 和 View 来表示，相关的微博也是如此。此时，我想在页面右侧显示的只是链接用户的用户名。其主要功能是当我单击每个帖子底部的每个用户名链接时呈现此信息。理想情况下，我希望在每次不刷新整个页面的情况下实现这一点。

我花了几天时间考虑这个问题，但目前我的知识/能力有限 - 任何帮助都会很棒!谢谢!

Answer 1

对于一些 javascript 或 jQuery 来说，这是一项很好的任务。看来您是 Rails 新手，所以我将从内联 js 和 css 开始，一旦您了解了它的工作原理，就可以将其移动到正确的位置。

首先在 comments_snippet div 中获取您想要的内容，以便页面在单击链接后看起来像您希望的那样。然后更改 comments_feed:

<div class="comments_feed" id="comments" style="display: none;">

刷新页面，并验证 div 是否未显示。然后在 View 顶部添加一些 javascript 来显示:

<script type="text/javascript">
    function show() {
        document.getElementById("comments").style.display = "block";
    }
</script>

然后添加一个链接来调用它:

<%= link_to "Show comments", "javascript:void(0)", onclick: "show()" %>

在真实的应用程序中，您可能会使用 jQuery 等 js 库或 css 转换来实现平滑的显示/隐藏动画。您还应该将样式和 js 保存在单独的文件中，以便 Rails Assets 管道可以编译它们。我认为微博教程稍后会对此进行介绍。