Deferred Back to the Future

by ifandelse

HTML

<script src="https://raw.github.com/gist/3195889/9d58e1d0b1b89d974e28feac8c76ee08844259c2/bind.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://gist.github.com/raw/7ed319a8d61e4c211db4/75d3ede514c8d4cb529c6e691e7c60d89538e900/deferredSetup.js"></script>
<script id="tmpl" type="text/html">
    <% _.each(messages, function(msg) { %>
        <div><%= msg %></div>
    <% }) %>
</script>

CSS

div {
    font-family: arial; 
    font-size: 1.75em;  
    margin: .5em;   
}

JavaScript

$.when(
    doc.hangCableOnClockTower(),
    marty.getInTimeMachine(delorean)
).done(
    function(sciName, trv) {
        results.push(sciName + " has attached the cable to the clock tower.");
        results.push(trv[0] + " is now inside the " + trv[1] + ".");
        $.when(
            delorean.goTo88Mph(),
            doc.slideDownCable()
        ).done(
            function(tmName, sciName) {
                results.push(tmName + " has reached 88 mph.");
                results.push(sciName + " slid down the cable to the street.");
                doc.connectCableOnStreet()
                    .done(function(sciName) {
                        results.push(sciName + " connected the cable on the street.");
                        lightning.strike().done(
                            function() {
                                results.push("Lightning strike!");
                                delorean.touchCable().done(
                                    function(tmName) {
                                        results.push(tmName + " touched the cable.");
                                        delorean.timeTravel().done(
                                            function(tmName, trvName, year) {
                                                results.push(tmName + " took " + trvName + " to the year " + year);
                                            }
                                        )
                                    }
                                )
                            }
                        );
                    }
                )    
            }                
        )    
    }
);