Agenda

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:

Backbone.Model

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

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'

Integrate Model & View

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

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

Create YoutubeSearchResults

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

Create MediaSearch Model, View

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

Create Router

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

Architecture

App model - YoutubeMediaProvider, App View

• define views in app.js
• create Views.App instance in mine.js
• YoutubeMediaProvider: show, fill with YoutubeMediaItems

Create RecentSearches

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

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

Playlist integration (Advanced)

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