Agenda

todo before workshop:

1. upgrade

Intro

1. explain project structure
2. explain templates
3. explain yours.js
4. explain project namespace
5. remember to attach new vars to window in "yours.js"

backbone workshop exercise:

1. Backbone.Model

   • create YoutubeSearchResultItem
   • show empty
   • explore methods
   • show on, listento
   • set json data options
   • excersice: create model

2. Backbone.View

   • create YoutubeSearchResultItem
   • show empty
   • explain methods
   • explain magic properties
   • show properties
   • explain render and convention of render return 'this'
   • explain delegation
   • excerise: create view, 2 click events, 'li'

3. Integrate Model & View

   • pass model to view
   • append to searchResults
   • change model - show data-binding

4. Backbone.Collection & _Underscore

   • explain collection
   • explain methods
   • explain events
   • show passing data
   • explain url
   • show fetch of ".json"
   • connect real url (TODO)
   • explain YoutubeMediaProvider
   • show parse

Advanced Backbone

5. Create YoutubeSearchResults

   • explain el: "searchResults"
   • integrate collection with underscore

6. Create MediaSearch Model, View

   • use pre-rendering
   • connect to existing "#media-explorer"
   • explain "onExplore" - should trigger event by setting value to model

7. Create RecentSearches

   • connect to existing
   • use pre-compile template
   • work on model (search) with listenTo
   • show this.$

8. Create Router

   • explain router
   • explain history.start
   • connect model (youtube provider)
   • log for testing

9. Router & Playing videos

   • connect YoutubeSearchResultItem to router path
   • connect model to youtube_player model, collection (respectively)
   • explain youtube player api (TODO - remove collection - make it work without it)
   • make router start the application

10. Playlist integration (Advanced)

    • create youtube_playlist.js with item (above)
    • create playlist anf playlist item views