Rails中link_to语法的教程和实例

195 阅读4分钟

Ruby-on-Rails和链接

link_to 帮助器简单地建立了链接。它不仅可以引导用户从一个页面到另一个页面,还可以在重定向路径中包含参数和查询。

很多人会认为,在使用<a href="URL_path">Go to</a> 时,link_to帮助器的作用与href完全一样,但我们现在会看到,在有复杂路径时,第一种选择的效率更高。此外,link_to 将使我们免于使用html和erb的混乱插值,如。

<!-- This works, but... -->
<a href="<%= user_path(@user) %>">My user</a>

你可能已经知道,重定向功能包含在一个应用程序的视图页面中,即模型-视图-控制器架构,并依赖于路由文件(在配置文件中)中定义的路由。应用程序的路由产生不同的路径,接受实例参数并转化为URL以重定向用户。记住,你可以随时检查你的应用程序的可用路由,在控制台中运行命令rake routes

link_to 语法

link_to 方法的基本语法如下。

<%= link_to "This is a link", link_path %>

正如你所看到的,只需要调用该方法,然后添加包含URL字符串的文本,然后是重定向路径。从这个基本结构中,我们现在将看到如何轻松地传递参数和附加其他方法,如删除。

传递参数和查询

link_to方法非常强大,因为它能够识别实例并为其生成相关路径。这非常有用,当你有一个项目(对象)的列表,你想把用户重定向到所选项目的显示页面。在下面的例子中,我们要把用户重定向到所选餐馆的页面。

<%= link_to "Select this restaurant", restaurant_path(@restaurant) %>

注意,@restaurant是一个实例的代表,在这个例子中是一个特定的餐厅。

当然,也可以获得应用程序中加载的整个餐馆列表。

<%= link_to "Restaurants", restaurants_path %>

注意路径的单数和复数形式的不同,当重定向到一个特定的餐馆( restaurant_path )或整个餐馆集合( restaurants_path )时。

也可以将搜索查询传递给一个链接。

<%= link_to "Thai Food", search_path, query: "Thai restaurant" %>

这将导致一个像"/search?query=Thai+restaurant "的URL。

同样非常有用的是**:返回**功能,它可以使用户的导航变得快速和友好。它是将用户重定向到先前访问的页面的关键,因为界面经常从不同的源头重定向到某个页面。这可以用:back 作为路由来完成。

<%= link_to "Back", :back %>

添加方法:删除

重定向时使用的典型方法是delete ,然而,你将能够把控制器中定义的任何方法传递给link_to帮助器。删除方法负责删除一个特定的实例。比如说。

<%= link_to "Delete restaurant", restaurant_path(@restaurant), method: "delete" %>

当调用这种类型的方法时,你可能希望用户在执行之前确认该动作。警报可以按以下方式实现。

<%= link_to "Delete restaurant", restaurant_path(@restaurant), method: "delete", { confirm: "Are you sure you want to delete this restaurant?" } %>

重定向:图标和图像

使用图标和图像来锚定链接是用户界面中的一种常见做法。例如,删除一个项目的垃圾桶图标或返回前一页的箭头。

有些人在用link_to方法为这类资产添加重定向链接时很费劲,因为它没有遵循我们习惯的href的结构。让我们来看看这个逻辑,它同样适用于图标和图片。

<%= link_to :back do %>
  <i class="icon-back-arrow"></i>
<% end %>

在这个例子中,我们执行的是返回重定向,之前没有使用String。链接将被呈现在我们稍后定义的内容上,使用do end 结构,然后是普通的html。

link_to的变体

重定向方法提供了一些有趣的变体,通过避免复杂的条件结构使我们的代码更加简洁。这些变体是

  • link_to_unless_current
  • link_to_if
  • link_to_unless

第一个变体将把用户重定向到相应的路径,除非用户已经在那里,而不需要重新加载页面。

如果和除非变体将作为常规的条件语句,根据一个或多个条件影响重定向。

用CSS和类添加样式

给带有link_to的链接添加样式是通过包含在_path之后的类来完成的。

<%= link_to "Restaurants", restaurants_path, class: "main-link-style" %>

在视图中定义了一个或多个类之后,你只需要在相应的css文件中应用所需的样式。

记住,也可以使用Bootstrap在需要的类中应用样式。

总结

导航是用户界面中最重要的东西之一。拥有一个强大的工具,例如link_to,对于能够引导用户并创造流畅的交互是必不可少的。

从编码的角度来看,link_to是直接的和直观的。这是帮助你设计和理解你的应用程序中的导航的关键,也是在需要时进行调试和更新。