• Use fixtures to render an array of products
• Highlight active menu item

See the installation instructions. Use tag 1.0.0.

• Open frontend/app/templates/application.hbs.
• Replace

  <a class='navbar-brand' href='#'>
    <img alt='Brand' src='images/kabisa.png' class='logo'>
  </a>

with

  {{#link-to 'index' class='navbar-brand'}}
    <img alt='Brand' src='images/kabisa.png' class='logo'>
  {{/link-to}}

• Replace <a href='#'>Products</a> with {{#link-to 'products'}}Products{{/link-to}}.
• Inspect the error shown in the Console tab in the browser. Ember is missing the products route, so let's create this.
• In the terminal, enter ember g route products.
• View the changes in the codebase.
• In the browser, open the Ember Inspector and inspect the Routes (hence the products line).
• In the app, click the Products link in the navbar. See the app and url is updating.
• Rename frontend/app/templates/index.hbs to frontend/app/templates/products.hbs. The current products.hbs can be overwritten.

• Enter the command ember g template index.
• Paste the code from this gist into frontend/app/templates/index.hbs.

• Open frontend/app/templates/products.hbs.
• Remove all but the first <div class='product'> elements from their <div class='products'> container.
• Wrap the remaining <div> in the Handlebars {{each}} helper:

  {{#each model as |product|}}
    <div class='product'>
    ...
    </div>
  {{/each}}

• The rendered page is currently empty. The products route need to set the model for the products controller to have something to render.
• Open frontend/app/routes/products.js which you created earlier.
• We use Ember Data's store to fetch a collection of product objects. Add the following code to the route:

  export default Ember.Route.extend({
    model() {
      return this.store.findAll('product');
    }
  });

• Inspect the error shown in the Console tab in the browser. Ember doesn't know the product model yet. Let's define it.
• Enter the command ember g model product.
• Inspect the error shown in the Console tab in the browser. Unless specified otherwise, the store sends a GET request to http://localhost:4200 by using DS.RESTAdapter. We will intercept this request by using Mirage to mock the server request.
• Enter the command ember install ember-cli-mirage.
• Replace frontend/app/mirage/config.js with the code from this gist .
• Create the frontend/app/mirage/fixtures folder.
• Paste the code from this gist into frontend/app/mirage/fixtures/products.js.
• Since we want to use fixtures, we need to remove the scenarios folder in the mirage folder: rm -rf frontend/app/mirage/scenarios.
• Restart the server.
• Now 15 static tiles are rendered. Let's actually use the fixtures' data. Open frontend/app/models/product.js and define the following attributes on the model:

  export default DS.Model.extend({
    title: DS.attr(),
    description: DS.attr(),
    price: DS.attr(),
    image: DS.attr()
  });

• Open frontend/app/templates/products.hbs and replace:
  • 24.99 with {{product.price}}
  • First Product with {{product.title}}
  • See more snippets like this... with {{product.description}}
  • <img src='http://lorempixel.com/320/150/technics/1/' alt=''> with <img src={{product.image}}>

In the navbar, the Products link has a active when the url changes to /products. Bootstrap however, expect this className to appear on the wrapper LI-tag for the item to be highlighted. Let's fix this.

• Open frontend/app/templates/application.hbs and replace:

  <li>
    {{#link-to 'products'}}Products{{/link-to}}
   </li>

with

  {{#link-to 'products' tagName='li'}}
    {{#link-to 'products'}}Products{{/link-to}}
  {{/link-to}}