Ruby on Rails Documentattion

# ERB Template

# Displaying Data

<h1>
  Hello <%= name %>!
</h1>
1
2
3

This <%= %> tag will be replaced by the templating engine by evaluating the Ruby code inside it.

It’s like string interpolation!

Notice the equals sign in <%= %>.

That tells ERB to render the contents of this tag

# Control Structures

If you want to write a loop or an if statement in ERB you want to leave out the equals sign so ERB doesn’t render things that you don’t need.

<% if @favorite_food == "chocolate" %>
  Are you a chocolate lover? Here are some of our best PREMIUM chocolate bars!
<% else %>
  Here are our top 10 snacks that people bought this month.
<% end %>
1
2
3
4
5
<% @books.each do |book| %>
  <%= book.title %>
  <%= book.author %>
  <br>
<% end %>
1
2
3
4
5

# Structuring Layouts

  • Yield

    Within the context of a layout, yieldidentifies a section where content from the view should be inserted. The simplest way to use this is to have a single yield, into which the entire contents of the view currently being rendered is inserted:

    <html>
  <head>
  </head>
  <body>
  <%= yield %>
  </body>
</html>
    1
    2
    3
    4
    5
    6
    7

    You can also create a layout with multiple yielding regions:

    <html>
  <head>
  <%= yield :head %>
  </head>
  <body>
  <%= yield %>
  </body>
</html>
    1
    2
    3
    4
    5
    6
    7
    8

    The main body of the view will always render into the unnamed yield. To render content into a named yield, you use the content_formethod.

  • content_for

    The content_formethod allows you to insert content into a named yieldblock in your layout. For example, this view would work with the layout that you just saw:

    <% content_for :head do %>
  <title>A simple page</title>
<% end %>

<p>Hello, Rails!</p>
    1
    2
    3
    4
    5

  • Partials

    Partial templates (partials) are a way of breaking the rendering process into more manageable chunks. Partials allow you to extract pieces of code from your templates to separate files and also reuse them throughout your templates.

    To create a partial, create a new file that begins with an underscore: _form.html.erb

    To render a partial as part of a view, use the render method within the view: <%= render "form" %>

    A partial can use its own layout file, just as a view can use a layout. For example, you might call a partial like this:

    <%= render partial: "link_area", layout: "graybar" %>
    1

    This would look for a partial named _link_area.html.erband render it using the layout _graybar.html.erb.

    You can also pass local variables into partials, making them even more powerful and flexible.

    <h1>New zone</h1>
<%= render partial: "form", locals: {zone: @zone} %>
    1
    2
    <%= form_with model: zone do |form| %>
  <p>
    <b>Zone name</b><br>
    <%= form.text_field :name %>
  </p>
  <p>
    <%= form.submit %>
  </p>
<% end %>
    1
    2
    3
    4
    5
    6
    7
    8
    9

    Object Partials

    Objects that respond to to_partial_path can also be rendered, as in <%= render @post %>. By default, for ActiveRecord models, this will be something like posts/post, so by actually rendering @post, the file views/posts/_post.html.erb will be rendered.

    A local named post will be automatically assigned. In the end, <%= render @post %> is a short hand for <%= render 'posts/post', post: @post %>.

    Collections of objects that respond to to_partial_path can also be provided, such as <%= render @posts %>. Each item will be rendered consecutively.

# Linking Files

  • Linking Javascript Files

    The javascript_include_tag helper returns an HTML script tag for each source provided.

    You can specify a full path relative to the document root, or a URL, if you prefer. For example, to link to a JavaScript file that is inside a directory called javascriptsinside of one of app/assets, lib/assetsor vendor/assets, you would do this:

    <%= javascript_include_tag "main" %>
    1

    Rails will then output a script tag such as this:

    <script src='/assets/main.js'></script>
    1

    To include multiple files such as app/assets/javascripts/main.jsand  app/assets/javascripts/columns.jsat the same time:

    <%= javascript_include_tag "main", "columns" %>
    1

    To include http://example.com/main.js:

    <%= javascript_include_tag "http://example.com/main.js" %>
    1

  • Linking to Feeds

    The auto_discovery_link_taghelper builds HTML that most browsers and feed readers can use to detect the presence of RSS, Atom, or JSON feeds. It takes the type of the link (:rss, :atom, or :json), a hash of options that are passed through to url_for, and a hash of options for the tag:

    <%= auto_discovery_link_tag(:rss, {action: "feed"},
  {title: "RSS Feed"}) %>
    1
    2

    There are three tag options available for the auto_discovery_link_tag:

    • :rel specifies the rel value in the link. The default value is "alternate".
    • :type specifies an explicit MIME type. Rails will generate an appropriate MIME type automatically.
    • :title specifies the title of the link. The default value is the uppercase :type value, for example, "ATOM" or "RSS".

  • Linking to CSS files

    The stylesheet_link_tag helper returns an HTML <link> tag for each source provided.

    You can specify a full path relative to the document root, or a URL. For example, to link to a stylesheet file that is inside a directory called stylesheetsinside of one of app/assets , lib/assets, or vendor/assets, you would do this:

    <%= stylesheet_link_tag "main" %>
    1

  • Linking to Image File

    The image_taghelper builds an HTML <img />tag to the specified file. By default, files are loaded from public/images

    <%= image_tag "header.png" %>

<%= image_tag "icons/delete.gif" %>

<%= image_tag "icons/delete.gif", {height: 45} %>

<%= image_tag "home.gif", size: "50x20" %>

<%= image_tag "home.gif", alt: "Go Home",
                          id: "HomeImage",
                          class: "nav_bar" %>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    .

  • Linking Video File

    The video_taghelper builds an HTML5 <video>tag to the specified file. By default, files are loaded from public/videos

    <%= video_tag "movie.ogg" %>
    1

    .

    Like an image_tag you can supply a path, either absolute, or relative to the public/videosdirectory. Additionally you can specify the size: "#{width}x#{height}" option just like an image_tag. Video tags can also have any of the HTML options specified at the end (id, class et al).

    The video tag also supports all of the <video> HTML options through the HTML options hash, including:

    • poster: "image_name.png", provides an image to put in place of the video before it starts playing.
    • autoplay: true, starts playing the video on page load.
    • loop: true, loops the video once it gets to the end.
    • controls: true, provides browser supplied controls for the user to interact with the video.
    • autobuffer: true, the video will pre load the file for the user on page load.

    You can also specify multiple videos to play by passing an array of videos to the video_tag :

    <%= video_tag ["trailer.ogg", "movie.ogg"] %>
    1

  • Linking Audio File

    The audio_taghelper builds an HTML5 <audio>tag to the specified file. By default, files are loaded from public/audios.

    <%= audio_tag "music.mp3" %>
    1

    You can also supply a hash of additional options, such as :id, :class, etc.

    Like the video_tag, the audio_tag has special options:

    • autoplay: true, starts playing the audio on page load
    • controls: true, provides browser supplied controls for the user to interact with the audio.
    • autobuffer: true, the audio will pre load the file for the user on page load.

← Asset Bundling (Webpacker) →