Templates, partials and layouts

12
For each controller there is an associated directory in the app/views directory which holds the template files that make up the views associated with that controller. These files are used to display the view that results from each controller action. The final HTML output is a composition of three Rails elements: Templates, Partials and Layouts

description

Templates, partials and layouts in Ruby on Rails

Transcript of Templates, partials and layouts

Page 1: Templates, partials and layouts

For each controller there is an associated directory in the app/views directory which holds the template files that make up the views associated with that controller. These files are used to display the view that results from each controller action.

The final HTML output is a composition of three Rails elements: Templates, Partials and Layouts

Page 2: Templates, partials and layouts

Templates

Action View templates can be written in several ways. If the template file has a .erb extension then it uses a mixture of ERB (included in Ruby) and HTML. If the template file has a .builder extension then a fresh instance of Builder::XmlMarkup library is used.

http://railscasts.com/episodes/269-template-inheritance

Page 3: Templates, partials and layouts

Partials

Partial templates – usually just called "partials" – are another device for breaking the rendering process into more manageable chunks. With partials, you can extract pieces of code from your templates to separate files and also reuse them throughout your templates.

Naming PartialsTo render a partial as part of a view, you use the render method

within the view: <%= render "shared/menu“%>

That code will pull in the partial from app/views/shared/_menu.html.erb.

Page 4: Templates, partials and layouts

Passing Variables to Partials

%h1 User Registration= form_for :user, url: users_path do |form|

.registration.details.address.demographics

= render 'shared/address', form: form

%p= form.submit 'Register'

That code will pull in the partial from: app/views/shared/_address.html.erb.

%p%label Street%br= form.text_area :street, rows: 2, cols: 40

%p%label City%br= form.text_field :city

Page 5: Templates, partials and layouts

Rendering an ObjectThe render method also provides a shorthand syntax to render an object into a

partial, which strictly depends on Rails naming conventions.

<%= render entry %>

The partial corresponding to _entry.html.haml and gets a local variable named

entry. This is equivalent to the following:

<%= render partial: 'entry', object: entry%>

Page 6: Templates, partials and layouts

Rendering CollectionsIt is very common that a template needs to iterate over a collection and

render a sub-template for each of the elements. This pattern has been implemented as a single method that accepts an array and renders a partial for each one of the elements in the array.

So this example for rendering all the products:<% @products.each do |product| %><%= render partial: "product", locals: { product: product } %>

<% end %>

can be rewritten in a single line:<%= render partial: "product", collection: @products %>

You can use a shorthand syntax for rendering collections. Assuming @products is a collection of Product instances, you can simply write the following to produce the same result:

<%= render @products %>

Page 7: Templates, partials and layouts

Layout

Action View decides which layout to render based on the inheritance hierarchy of controllers being executed.

Most Rails applications have an application.html.erb file in their layout directory. It shares its name with the ApplicationController, which is typically extended by all the other controllers in an application; therefore it is picked up as the default layout for all views.

Within a layout, you have access to three tools for combining different bits of output to form the overall response:

Asset tags yield and content_for Partials

Page 8: Templates, partials and layouts

Asset Tag Helpers

Asset tag helpers provide methods for generating HTML that link views to feeds, JavaScript, stylesheets, images, videos and audios. There are six asset tag helpers available in Rails:

javascript_include_tag

stylesheet_link_tag

image_tag

auto_discovery_link_tag

video_tag

audio_tag

Page 9: Templates, partials and layouts

Linking to JavaScript Files with the javascript_include_tag

<%= javascript_include_tag "main" %>

Rails will then output a script tag such as this:

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

It will looking for file in app/assets/javascripts/main.js

To include app/assets/javascripts/main.js and app/assets/javascripts/photos/columns.js:

<%= javascript_include_tag "main", "/photos/columns" %>

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

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

The same thing for include stylesheet_link_tag

Page 10: Templates, partials and layouts

Understanding yield

Within the context of a layout, yield identifies 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>

You can also create a layout with multiple yielding regions:<html><head><%= yield :head %></head><body><%= yield %></body>

</html>

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

Page 11: Templates, partials and layouts

Using the content_for Method The content_for method allows you to insert content into a named yield block 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>

The result of rendering this page into the supplied layout would be this HTML:<html><head>

<title>A simple page</title></head><body>

<p>Hello, Rails!</p></body>

</html>

The content_for method is very helpful when your layout contains distinct regions such as sidebars and footers that should get their own blocks of content inserted. It's also useful for inserting tags that load page-specific JavaScript or css files into the header of an otherwise generic layout.

Page 12: Templates, partials and layouts

References

http://guides.rubyonrails.org/layouts_and_rendering.html

Rails 4 way.pdf in dcserver