Exercise 4 - Fetching and rendering a Collection

In this creative exercise, we will be putting all of our skills from the day together. Do as much as you can in the time that we have.

Feel free to follow the instructions below, or branch out to practice skills at your own pace!

• If you didn't finish the last exercise, download the solution files from here.
• Continue from your previous files or the solution files.

Setup

1. If you are not yet running your code from a local server, do that now by following these instructions. We need to do this because of security restrictions on file:// protocol with XMLHttpRequests.

Instructions - Add Yourself

1. Instantiate a new Person that is you, and give yourself a unique "id" attribute
2. There is a JSON REST API at http://gdibb.herokuapp.com/people that you can use from your app.
3. Add the urlRoot to the Person Model.
4. use .save() to add yourself to the collection
5. If you are successful, you will see yourself at http://gdibb.herokuapp.com/people

Instructions - Fetching the Collection

1. Using the API, add the url to the People collection.
2. In $(document).ready(), call .fetch() on the collection.
3. Make sure that your view knows when to update. For this, you can create an event listener on the collection for 'reset'.

Instructions - Get Creative!

1. Add events to the page, style it with CSS, or make an interface to add or edit the people in your rolodex.
2. When you are done, set a finished property on your Model to true and save it to the server!

Bonus - Parsing the Models

1. Some of the models from the server might be inconsistent - use model.parse() to clean them up before the template gets rendered