Backbone.Marionette.js: A Gentle Introduction Build a Marionette.js app, one step at a time David Sulc © 2013 David Sulc T C ABLE OF ONTENTS Foreword from Derick Bailey Cover Credits Who This Book is For Following Along with Git Jumping in for Advanced Readers Setting Up Asset Organization Getting Our Assets Displaying a Static View Dynamically Specifying a View Template Specifying Other View Attributes Exercise Displaying a Model Using Model Defaults Introducing Events Exercise Displaying a Collection of Models Introducing the CollectionView Listing our Contacts with a CollectionView Sorting a Collection Exercise Structuring Code with Modules Extracting our App Definition Moving Contacts to the Entities Module Creating a Module for the ContactsApp Sub-Application Moving the App Initialization Handler Exercise Dealing with Templates Using a CompositeView Exercise Using Events Exercise Events, Bubbling, and TriggerMethod Communicating via Events Animating the Removed ItemView Exercise Introducing TriggerMethod Displaying Contacts in Dedicated Views Wiring up the Show Event The ContactsApp.Show Sub-Module Implementing Routing How to Think About Routing Adding a Router to ContactsApp Routing Helpers DRYing up Routing with Events Adding a Show Route Exercise Implementing a View for Nonexistent Contacts Dealing with Persisted Data Adding a Location to our Entities Configuring our Entities to use Web Storage Loading our Contacts Collection Loading a Single Contact Deleting a Contact Handling Data Latency Delaying our Contact Fetch Using jQuery Deferreds Displaying a Loading View Exercise Passing Parameters to Views and SerializeData Managing Forms: Editing a Contact Saving the Modified Contact Validating Data Displaying a Modal Window Using jQuery UI Adding the Edit Link Implementing Modal Functionality Handling the Modal Form Data Subdividing Complex Views with Layouts Regions vs Layouts Extending from Base Views Managing Dialogs with a Dedicated Region Customizing onRender Filtering Contacts Implementing an Empty View Optional Routes and Query Strings The ‘About’ Sub-Application Coding the Sub-App The ‘Header’ Sub-Application Setting up the Models Adding Templates and Views Implementing the Controller and Sub-Application Navigating with the Brand Highlighting the Active Header Handling Menu Clicks Closing Thoughts Keeping in Touch Other Books I’ve Written Module Architecture Exercise Solutions Displaying a Single-Item List Displaying a Contact With No Phone Number Sorting a Collection Declaring a Template Sub-Module Building your own CompositeView Displaying the Contents of a Clicked Table Cell Event Bubbling from Child Views Getting Back to the Contacts List Overriding Marionette’s Template Loader Declaring a Template Sub-Module Tackling the Template Loader Specifying our new Template Extending Marionette Using Web Storage for Persistence Implementation Strategy Adding to the Entities Module Using a Mixin with Underscore Determining the Storage Key Creating a FilteredCollection Foreword from Derick Bailey The open and flexible nature of Marionette allows it to be used in more ways than can be imagined. I’ve seen applications that I would never have dreamed of, built with it: games, financial reporting tools, search engines, mobile applications, ticket sales and e-commerce, database management systems, and more. The down side of this flexibility, though, is documentation. Creating a comprehensive suite of documents that show all of the different ways that the parts can be combined is an overwhelming task. Plenty of introductory articles, blog posts and videos exist out there on the web. But, very little of this information moved beyond the simple patterns of “replace this Backbone code with this Marionette code”. Putting the pieces together requires a new level of abstraction and thinking, and a new set of patterns to work with. And this documentation simply did not exist, even if some application developers other than myself were using these higher level patterns. It wasn’t until Brian Mann started producing his BackboneRails.com screencasts, and David Sulc started writing this book, that the Marionette community began to see all of the patterns of implementation that I was advocating, in one place. And I’m so very happy to see David writing this book and Brian producing those screencasts. The community needs this information. The documentation gap is finally being closed. This is the book that I wanted to write, but never had time to write. It is a complete and thorough introduction to building scalable applications with Marionette.js. Better still, it advocates and demonstrates the same patterns and principles that I use in my own demonstrates the same patterns and principles that I use in my own applications. You owe it to yourself to work through all of the exercises in this book, even if you are a seasoned Backbone and Marionette developer. David has done a wonderful job of breaking down the architecture of large Marionette applications, lighting the path for each step of the journey. – Derick Bailey, creator of Marionette.js Cover Credits The cover image depicts a “theatrical appliance” designed to help ventriloquists by having a partner voice their puppet. The image is from patent application 1,197,543 filed in 1914, which you can view here.