Exercise: Views in MVC



In this exercise, you will take an app and add a Model View and a Collection View.

Go through these steps, and do as many as you can in the time we have:

  1. Start with the solution from the last exercise (or download from here).
  2. Create a VideoItemView. It should take a video model argument and return a <li>.
  3. Create a VideoCollectionView. It should do the following:
    1. It should take a video collection argument
    2. It sould create a <ul> element
    3. It should iterate through the collection and create a new VideoItemView for each element of the collection
    4. It should append each VideoItemView to the <ul>
    5. It should return the <ul> from the constructor
  4. Change document.ready. After you create your collection, instantiate a new VideoCollectionView that's constructed from an instance of the VideoCollection. Append that collection view to the body of the document.
  5. Try loading the page and see if your code works!

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.