Git Product home page Git Product logo

rendering-collections-reading-seattle-web-080519's Introduction

Objectives

  1. Use the collection keyword with partials
  2. Pass a collection to the render method
  3. Handle empty collections

Overview

Up until now our only way to render collections was somewhat manually. We could iterate over an array and render the partial for each object in the array. Let's see how Rails can abstract this into a nicer syntax.

Lesson

Make sure you run rake db:seed before you test out the app in your browser. Because this lesson focuses on using the collection keyword with partials, we've hard-coded in the connection between authors and posts. In the posts controller create action, we link the newly created post with the first author in the database.

Rendering Collections

Currently, our posts#index view is manually rendering the partial in a loop.

<% @posts.each do |post| %>
  <%= render :partial => "post", {:locals => {:post => post}} %>
<% end %>

Rails offers a great way to render a collection using a partial by passing the collection option to the render method.

<%= render :partial => "post", :collection => @posts %>

Our code is tighter and both more abstract and more clear. Another even more abstract method Rails gives us to do this is passing an array directly to the render method.

<%= render @posts %>

This approach is a bit more abstract. Under the hood Rails uses the convention that you will have a partial with the name of the models in the collection. Rails will even render a collection of heterogeneous models ([customer, order, customer]) calling the correct partial for each one.

Empty Collections

What happens if the collection you pass to your render call is empty? If you don't handle this exception the render method will return nil and nothing will appear on the screen. A useful trick is to use the || operator to print something to the screen to alert the user to this.

<%= render(@posts) || "There are no blog posts!" %>

Note: When dealing with an empty collection, you'll need to use () to wrap that collection.

Conclusion

As always, Rails has tried to abstract commonly used functionality into more terse and implicit code. Experiment with these tricks in the upcoming lab.

Video Review

View Rendering Collections on Learn.co and start learning to code for free.

rendering-collections-reading-seattle-web-080519's People

Contributors

blake41 avatar victhevenot avatar maxwellbenton avatar annjohn avatar danielseehausen avatar jmburges avatar drakeltheryuujin avatar pletcher avatar hoffm386 avatar c1505 avatar franknowinski avatar sophiedebenedetto avatar dependabot[bot] avatar vibraniumforge avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.