如何使用Rails 4.2.2中的link_to渲染一个部分视图

Question

我希望用户能够在他们的个人资料页面上点击“个人简介”链接，以显示从数据库中获取的其个人简介内容。为此，我创建了一个局部文件 lovelies/_bio.html.erb，因为我希望在他们的“个人资料页面”上加载“用户个人简介”，而不是将他们发送到另一个页面。

目前，无法找到这个局部文件。以下是我的代码。

在我的 routes.rb 文件中，我已经为个人简介操作创建了一个 URL 路径，该路径转换为：

    bio_lovely_path url -> /lovelies/:id/bio 

这样做是因为我需要检索特定用户的信息，所以将其创建为成员。

config/routes.rb

resources :lovelies do
  member do
    get 'bio'
  end
 end

我的链接在layouts/_header.html.erb文件中

 if logged_in?
  <li class="header-log"><%= link_to "Bio", bio_lovely_path, :remote => true %></li>
else
//display none logged in links
 <%end%>

我控制器中的动作叫做

LovelyController，bio动作定义如下

//显示当前用户个人简介

    def bio
      @lovely = Lovely.find(params[:id])
      respond_to |format|
       format.js
      end
    end

我在lovelies.coffee文件中有一个jQuery调用，将lovelies/_bio.html.erb局部渲染到lovelies/show.html.erb的div中。

    jQuery ->$('#partial).html '<%= escape_javascript(render 'bio') %>

我的输出显示出现了500错误-无法加载资源。

我的理解是，jQuery将该html添加到show.html.erb中的

中，它会被处理为ruby，并应该渲染_bio.html.erb。我是Rails的新手，非常感谢有关如何解决此问题的建议和指导。

谢谢。

- mbozugrace

Answer 1

从链接助手中的:remote => true可以看出，您正在尝试在Rails中进行AJAX调用。 您已经接近成功了； 但是，您还没有完全满足Rails的期望。

当链接看起来像这样时

= link_to 'Bio', bio_lovely_path(@lovely), :remote => true
# small change from the code you gave - because your path `lovelies/:id/bio` 
# has `:id` in it, you must provide the object you are referring to, `@lovely`.
# in fact, this is probably where your 500 error came from.

当点击时，就好像触发了一个类似于以下的AJAX调用：

// you don't have to write this; `:remote => true` ensures that it gets done 
// for you.
$.ajax({
    url: '/lovelies/<@lovely.id>/bio',
    type: 'get',
    dataType: 'script'
})

这将会在数据类型为js的情况下，触发你的 lovelies#bio控制器操作。 你做得很正确，通过告诉它要 respond_to js 格式来处理它。 这将允许它呈现一个js文件。 也就是说，在控制器动作的末尾，Rails 将查找一个对应的 js.erb 文件来执行。（通常，它会寻找一个 html.erb 文件，但是你通过使用 :remote => true，告诉它这次要使用 JavaScript。）

app/views/lovelies/bio.js.erb¹

$('#partial').html('<%= escape_javascript(render(partial: "bio.html.erb")).html_safe %>');

以前，你可能在 lovelies.coffee 中有大概这样的代码，但它不起作用。首先，Rails 不知道在控制器动作之后执行它。另外，在 assets 文件夹中的文件在 ERB 方面的功能有限（尽管如果你给它们加上 .erb 扩展名，它们可以做一些事情）。

¹ 如果你愿意，你可以使用 CoffeeScript 的 .coffee.erb 格式。我不知道具体细节；如果可以避免，我会避免使用 CoffeeScript。

---

现在我已经试图解释了使用 Rails 的 :remote => true 属性进行 AJAX 过程，让我提出一种替代方案。我最近意识到，对于像插入几个元素到页面这样简单的任务，通常更容易的方法是一开始就把它们包含进来。通过给它们的容器设置 display: none CSS 属性进行隐藏，然后使用 jQuery 的 .slideDown() 或类似的方法在按钮被点击时显示它们。这将使您跳过路由、控制器动作、js.erb 文件等所有麻烦。

基本上，我建议（大多数情况下）将 Rails 中的花哨 AJAX 调用保留在删除、创建或更新时使用。当需要向页面动态添加一些额外信息时，有一种更简单的方法。

- februaryInk

Answer 2

找到了一个简单的解决方案

1. 创建一个容器来容纳渲染的局部内容。
2. 使用Coffeescript事件来触发局部内容在关联的id被点击时进行渲染。

html文件 - //点击按钮并在页面上显示个人简介

<button id="display-bio">Lovely Bio </button>

//在页面上显示个人简介的div

<div id="bio" style='display:none'>
    <%= render 'layouts/bio'%>
</div>

使用CoffeeScript编写的代码

//触发事件的CoffeeScript代码

$('#display-bio).click ->
    $('#bio).show()

我认为这很简单。

- mbozugrace

Answer 3

一个局部视图应该通过在另一个文件中使用 render partial: 'name_of_partial' 来呈现为不同页面的一部分。然而，你的控制器有一个 bio 方法，这将需要一个 bio.html.erb 文件，以便Rails在该路径下用作主要的生物页面。请注意文件名开头的下划线缺失。

要么使用不同的页面并在其中呈现你的 _bio.html.erb 局部视图（并且不要有单独的路径），要么有一个专门用于生物信息的页面。

- Matt Gibson