Templates, partials and layouts

296 views

Published on

Templates, partials and layouts in Ruby on Rails

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
296
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Templates, partials and layouts

  1. 1. 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
  2. 2. 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
  3. 3. 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 Partials To 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.
  4. 4.  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
  5. 5.  Rendering an Object The 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%>
  6. 6.  Rendering Collections It 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 %>
  7. 7. 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
  8. 8.  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
  9. 9.  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
  10. 10.  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.
  11. 11.  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.
  12. 12. References  http://guides.rubyonrails.org/layouts_and_rendering. html  Rails 4 way.pdf in dcserver

×