Download from Wow! eBook <www.wowebook.com>
Backbone.Marionette.js: A Gentle
Introduction
Build a Marionette.js app, one step at a time
David Sulc
©2013 David Sulc
Download from Wow! eBook <www.wowebook.com>
Contents
Foreword from Derick Bailey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Cover Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Who This Book is For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Following Along with Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
Jumping in for Advanced Readers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Setting Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Asset Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Getting Our Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Displaying a Static View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Dynamically Specifying a View Template . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Specifying Other View Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Displaying a Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Using Model Defaults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Introducing Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Displaying a Collection of Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Introducing the CollectionView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Listing our Contacts with a CollectionView . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Sorting a Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Structuring Code with Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Extracting our App Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Moving Contacts to the Entities Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Creating a Module for the ContactsApp Sub-Application . . . . . . . . . . . . . . . . . . . 40
Moving the App Initialization Handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Dealing with Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Download from Wow! eBook <www.wowebook.com>
CONTENTS
Using a CompositeView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Using Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Events, Bubbling, and TriggerMethod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Communicating via Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Animating the Removed ItemView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Introducing TriggerMethod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Displaying Contacts in Dedicated Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Wiring up the Show Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
The ContactsApp.Show Sub-Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Implementing Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
How to Think About Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Adding a Router to ContactsApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Routing Helpers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
DRYing up Routing with Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Adding a Show Route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Implementing a View for Nonexistent Contacts . . . . . . . . . . . . . . . . . . . . . . . . 86
Dealing with Persisted Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Adding a Location to our Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Configuring our Entities to use W e b Storage . . . . . . . . . . . . . . . . . . . . . . . . . 92
Loading our Contacts Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Loading a Single Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Deleting a Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Handling Data Latency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Delaying our Contact Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Using jQuery Deferreds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Displaying a Loading View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Passing Parameters to Views and SerializeData . . . . . . . . . . . . . . . . . . . . . . . . 110
Managing Forms: Editing a Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Saving the Modified Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Validating Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Displaying a Modal Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Using jQuery UI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Download from Wow! eBook <www.wowebook.com>
- 1
- 2
- 3
- 4
前往页