02.0.0 Render Nested Resource

What you will learn

• User {{render}} to extract markup
• Use nested resource

Before you start

See the installation instructions. Use tag 2.0.0.

Move markup to partial

• Open frontend/app/templates/products.hbs.
• Move <div class='row carousel-holder'>...</div> to a new file frontend/app/templates/_carousel.hbs and replace the markup with

  {{partial 'carousel'}}

Render details for the selected product

• Open frontend/app/templates/products.hbs.
• Within the <div class='products'> container replace

  <h4><a href='#'>{{product.title}}</a></h4>

with

<h4>{{#link-to 'products.show' product}}{{product.title}}{{/link-to}}</h4>

• Inspect the error shown in the Console tab in the browser. Ember is missing the products.show route, so let's create this.
• In the terminal, enter ember g route products/show.
• Open frontend/app/router.js and update Router.map to

Router.map(function() {
  this.resource('products', function() {
    this.route('show', {
      path: ':product_id'
    });
  });
});

• Open frontend/app/templates/products.hbs.
• Move the markup wrapped by <div class='content-detail'> to frontend/app/templates/products/show.hbs (delete the content of show.hbs) and replace it with {{outlet}}:

<div class='content-detail'>
  {{outlet}}
</div>  <!-- /.content-detail -->

• Now the right column is updated every time you select another product. The content however, is still static HTML.
• Open frontend/app/templates/products/show.hbs and replace:
  • <img class='img-responsive' src='http://lorempixel.com/800/300/technics/1/' alt=''> with <img src={{model.image}}>
  • 24.99 with {{model.price}}
  • Product Name with {{model.title}}
  • See more snippets like this... with {{model.description}}

Bonus: Show content when nothing selected

• Navigating to /products shows an empty column on the right side. Ember uses the products/index template to render if it can find one.
• In the terminal, enter ember g template products/index.
• Paste the code from this gist into frontend/app/templates/products/index.hbs.