06.0.0 Retrieve Data From a Back End

What you will learn

• Replace FixtureAdapter
• Use Loading Template

Before you start

See the installation instructions. Use tag 6.0.0. (don't forget running npm install and run ember together with rails..)

Replace FixtureAdapter

• Open app/adapters/application.js.
• Replace

export default DS.FixtureAdapter.extend({
});

with

export default DS.ActiveModelAdapter.extend({
  namespace: 'api'
});

• In the browser, open the Network tab in the Inspector and make sure the XHR filter is turned on. Edit a product and save the changes and inspect the XHR PUT request.

Use Loading Template

• Open the Rails controller Api::ProductsController and add a sleep of 1 second to the index action:

# app/controllers/api/products_controller.rb
...
def index
  sleep 1
  ...
end
...

• Refresh the app.
• In the terminal, enter ember g template loading.
• Add the following markup:

<i class='fa fa-spin fa-spinner fa-2x' id='loader'></i>

• Refresh the app again and watch the loading spinner.