Merge branch 'master' into kab

README.md

@@ -146,22 +146,59 @@ Each of the following views should correspond to a color. ex: trip view is yello
 
 
 
-### Tracing Events
-
+### Initial Page Load
 **Activity:**
-Use the worksheet that corresponds to all the
-Cut out the squares and put the segments of code in order in which they are ran, based on that event happening
+Some of our JavaScript is run immediately when the page loads, and some of it doesn't run until the user does something. To help understand which is which and in what order various things happen, let's leave ourselves a trail of breadcrumbs to follow. We'll start by looking at what does and doesn't happen when the page is first loaded.
 
-- When Button, 'See All Trips', is clicked
-- When button, 'Make Reservation', is clicked
+To do so, we'll add a log line to the top of every function in our TREK app. Each line should be of form
 
-### Initial Page Load
-When the page initially loads, there is a lot of code in various parts of our application that are depended on to make sure it all comes together.
+```javascript
+console.log(">>> BREADCRUMBS: #");
+```
+
+Where `#` is the order in which the log line appears when the app is started. If the function shouldn't be called when the page is first loaded, replace `#` with `does not print`. So the first line to be printed out should look like
+
+```javascript
+console.log(">>> BREADCRUMBS: 1");
+```
+
+Did things appear in the order you expected? Did you get any `does not print`s? Check in with the person next to you and verify, then revise your numbering if needed.
+
+Now change your numbering to reflect the order that functions are called when various buttons are pressed.
+
+
+## Tracing Events
+
+**Activity**
+It can be difficult to figure out when functions get called when we're listening to events and there's not one line of execution to follow.  Now you and your partner will be diving into the events and the functions listening to those events in this Trek App.  
+
+### DOM Events
+
+Using a whiteboard make a list of the DOM events each of the views are listening to and draw arrows to functions that the events trigger.  
+
+-  When button 'See All Trips' is clicked
+-  When button 'Make Reservation' is clicked
+
+![image of a DOM Event linked to a function](images/diagramEvents.png)
+
+Now look at the event handler functions, do they invoke other events or functions?  Diagram those as well.
+
+### Backbone Events
+
+Look at the listenTo calls in the initialize functions.  Are any of the views listening to events on other objects, such as Models, Collections or Views?
+
+Diagram those events as well.
+
+### Check your work
+
+Now cause the events to trigger, for example click on a trip, or add a reservation.  
 
-- On page load
+-  Look at the console log messages you put in earlier for the Page Load activity.
+-  Did they print? Were they in the expected order?  Why or why not?
+-  How many events did you identify?  Check with a neighbor to see if they have the same.  
 
 
-##4) Would this be a backbone app?
+## 4) Would this be a backbone app?
 
 
 Soundcloud.com