Lesson: Backbone Views & Templating

BACKBONE_VIEWS.md

Backbone Views & Templating

Lesson Objectives

• Explain why we need templates on the front-end in addition to the server
• Identify the responsibilities of a "View" in Backbone, and how it differs from a traditional MVC view
• Describe the purpose of the "el" attribute in a Backbone view
• Explain the difference between views with an "el" reference versus a "tagName".
• Describe how Backbone views respond to DOM events
• Explain why it's important to call "remove" when taking a view out of the DOM.
• Use handlebars to create JS templates manipulated by a Backbone view
• Use the "render" function to manipulate the DOM to reflect the application's current state
• Create an item view that responds to DOM events and updates a model
• Create a collection view that generates and contains many item views
• Destroy an item view when the corresponding model has been destroyed
• Create a View with an "el" reference that attaches it to a document element.
• Create a View with a "tagName" reference that builds its own DOM element.
• Use handlebars iterators and conditionals to implement basic control flow in a template

Outline

1. Review of Backbone models/collections
2. Intro to views

• What are they in Backbone (views are attached to DOM elements)
• Why we use them
• How they fit into the context of MV*

3. Why do we still need templates on the client if we have them on the server?
4. Go over the Backbone docs for views, why we use them

• Go over model/collection events that we might want to listen to: http://backbonejs.org/#Events-catalog

5. Discuss templating options
6. Look over the Todo sample app for item views

• Describe the purpose of the "el" attribute in a Backbone view
• Explain the difference between views with an "el" reference versus a "tagName".
• Describe how Backbone views respond to DOM events

7. YOU DO - Work on Grumblr item view on your own
8. WE DO - Go over Grumblr item view together
9. WE DO - Go over Grumblr form view together
10. Look over Todo sample app for collection views
11. YOU DO - Work on Grumblr collection view on your own
12. WE DO - Go over Grumblr collection view together

OPTIONAL: Create Grumblr with jQuery soup so we can compare against Backbone code