Ruby_on_Rails

Ruby on Rails TutorialAdding an Amazon RDS to your rails applicationChange a default Rails application enviornmentConfigure Angular with RailsDeploying a Rails app on HerokuIntegrating React.js with Rails Using HyperloopNested form in Ruby on RailsPayment feature in railsRails -EnginesRails 5Rails 5 API AutheticationRails APIRails Best PracticesRails Cookbook - Advanced rails recipes/learnings and coding techniquesRails Engine - Modular RailsRails frameworks over the yearsRails generate commandsRails loggerRails on dockerReact with Rails using react-rails gemRSpec and Ruby on RailsRuby on Rails ActionCableRuby on Rails ActionControllerRuby on Rails ActionMailerRuby on Rails Active JobsRuby on Rails Active Model SerializersRuby on Rails ActiveJobRuby on Rails ActiveModelRuby on Rails ActiveRecordRuby on Rails ActiveRecord AssociationsRuby on Rails ActiveRecord LockingRuby on Rails ActiveRecord MigrationsRuby on Rails ActiveRecord Query InterfaceRuby on Rails ActiveRecord TransactionsRuby on Rails ActiveRecord ValidationsRuby on Rails ActiveSupportRuby on Rails Add Admin PanelRuby on Rails Asset PipelineRuby on Rails Authenticate API using DeviseRuby on Rails Authorization with CanCanRuby on Rails CachingRuby on Rails Change default timezoneRuby on Rails Class OrganizationRuby on Rails ConfigurationRuby on Rails DebuggingRuby on Rails Decorator patternRuby on Rails ElasticsearchRuby on Rails Factory GirlRuby on Rails File UploadsRuby on Rails Form HelpersRuby on Rails Friendly IDRuby on Rails GemsRuby on Rails I18n - InternationalizationRuby on Rails Import whole CSV files from specific folderRuby on Rails Model states: AASMRuby on Rails MongoidRuby on Rails Multipurpose ActiveRecord columnsRuby on Rails Naming ConventionsRuby on Rails Prawn PDFRuby on Rails Reserved WordsRuby on Rails RoutingRuby on Rails Safe ConstantizeRuby on Rails Securely storing authentication keysRuby on Rails Shallow RoutingRuby on Rails Single Table InheritanceRuby on Rails TurbolinksRuby on Rails ViewsTesting Rails ApplicationsTools for Ruby on Rails code optimization and cleanupUpgrading RailsUser Authentication in RailsUsing GoogleMaps with Rails



Ruby on Rails Views

From WikiOD

Structure[edit | edit source]

As Rails follows the MVC pattern Views are where your "templates" are for your actions.

Let's say you have a controller articles_controller.rb. For this controller you would have a folder in views called app/views/articles:

app
|** controllers
|   '-- articles_controller.rb
|
'** views
    '-- articles
    |   |- index.html.erb
    |   |- edit.html.erb
    |   |- show.html.erb
    |   |- new.html.erb
    |   '- _partial_view.html.erb
    |
    '-- [...]

This structure allows you to have a folder for each controller. When calling an action in your controller the appropriate view will be rendered automatically.

// articles_controller.rb
class ArticlesController < ActionController::Base
  def show
  end
end

// show.html.erb
<h1>My show view</h1>

Partials[edit | edit source]

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" %>

  • Note, the underscore is left out when rendering
  • A partial has to be rendered using its path if located in a different folder

To pass a variable into the partial as a local variable, use this notation:

<%= render :partial => 'form', locals: { post: @post } %>

Partials are also useful when you need to reuse exactly the same code (DRY philosophy).

For example, to reuse <head> code, create a partial named _html_header.html.erb, enter your <head> code to be reused, and render the partial whenever needed by: <%= render 'html_header' %>.

Object Partials[edit | edit source]

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.

Global Partials[edit | edit source]

To create a global partial that can be used anywhere without referencing its exact path, the partial has to be located in the views/application path. The previous example has been modified below to illustrate this feature.

For example, this is a path to a global partial app/views/application/_html_header.html.erb:

To render this global partial anywhere, use <%= render 'html_header' %>

AssetTagHelper[edit | edit source]

To let rails automatically and correctly link assets (css/js/images) in most cases you want to use built in helpers. (Official documentation)

Image helpers[edit | edit source]

image_path[edit | edit source]

This returns the path to an image asset in app/assets/images.

image_path("edit.png") # => /assets/edit.png

image_url[edit | edit source]

This returns the full URL to an image asset in app/assets/images.

image_url("edit.png") # => http://www.example.com/assets/edit.png

image_tag[edit | edit source]

Use this helper if you want to include an <img src="" />-tag with the source set.

image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />

JavaScript helpers[edit | edit source]

javascript_include_tag[edit | edit source]

If you want to include a JavaScript-file in your view.

javascript_include_tag "application" # => <script src="/assets/application.js"></script>

javascript_path[edit | edit source]

This returns the path of your JavaScript-file.

javascript_path "application" # => /assets/application.js

javascript_url[edit | edit source]

This returns the full URL of your JavaScript-file.

javascript_url "application" # => http://www.example.com/assets/application.js

Stylesheet helpers[edit | edit source]

stylesheet_link_tag[edit | edit source]

If you want to include a CSS-file in your view.

stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />

stylesheet_path[edit | edit source]

This returns the path of you stylesheet asset.

stylesheet_path "application" # => /assets/application.css

stylesheet_url[edit | edit source]

This returns the full URL of you stylesheet asset.

stylesheet_url "application" # => http://www.example.com/assets/application.css

Example usage[edit | edit source]

When creating a new rails app you will automatically have two of these helpers in app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

This outputs:

// CSS
<link rel="stylesheet" media="all" href="/assets/application.self-e19d4b856cacba4f6fb0e5aa82a1ba9aa4ad616f0213a1259650b281d9cf6b20.css?body=1" data-turbolinks-track="reload" />
// JavaScript
<script src="/assets/application.self-619d9bf310b8eb258c67de7af745cafbf2a98f6d4c7bb6db8e1b00aed89eb0b1.js?body=1" data-turbolinks-track="reload"></script>

Replace HTML code in Views[edit | edit source]

If you ever wanted to determine the html content to be printed on a page during run time then, rails has a very good solution for that. It has something called the content_for which allows us to pass a block to a rails view. Please check the below example,

Declare content_for

<div>
  <%= yield :header %>
</div>

<% content_for :header do %>
 <ul>
   <li>Line Item 1</li>
   <li>Line Item 2</li>
 </ul>
<% end %>

HAML - an alternative way to use in your views[edit | edit source]

HAML (HTML abstraction markup language) is a beautiful and elegant way to describe and design the HTML of your views. Instead of opening- and closing tags, HAML uses indentation for the structure of your pages. Basically, if something should be placed within another element, you just indent it by using one tab stop. Tabs and white space are important in HAML, so be sure that you always use the same amount of tabs.

Examples:

#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>

And in HAML:

#myview.html.haml
%h1= @the_title
%p
    This is my form
====  render 'form'

You see, the structure of the layout is much clearer than using HTML and ERB.

Installation

Just install the gem using

gem install haml

and add the gem to the Gemfile

gem "haml"

For using HAML instead of HTML/ERB, just replace the file extensions of your views from something.html.erb to something.html.haml.

Quick tipps

Common elements like divs can be written in a short way

HTML

<div class ====
"myclass">My Text</div>

HAML

%div.myclass

HAML, shorthand

.myclass

Attributes

HTML

<p class="myclass" id="myid">My paragraph</p>

HAML

%p{:class => "myclass", :id => "myid"} My paragraph

Inserting ruby code

You can insert ruby code with the = and - signs.

= link_to "Home", home_path

Code starting with = will be executed and embedded into the document.

Code starting with - will be executed, but not inserted into the document.

Full documentation

HAML is very easy to start with, but is also very complex, so that I'll recommend reading the documentation.

Credit:Stack_Overflow_Documentation