AI Features
Log In
0% completed
All Lessons
Free Lessons (4)
Introduction
What is Marionette.js?
Running the Application
Asset Organization
Displaying a Static View
Static Views
Dynamically Specifying a View Template
Modifying the DOM Structure
Displaying a Model
Displaying Content from a Model
Model Defaults and Events
Exercise: Model Defaults and Events
Solution: Model Defaults and Events
Displaying a Collection of Models
Introducing the CollectionView
Listing our Contacts with a CollectionView
Sorting a Collection
Exercise: Sorting a Collection
Solution: Sorting a Collection
Quiz: Collection of Models
Structuring Code with Modules
Starting with Modules
Defining Modules
Moving Contacts to the Entities Module
Creating a Module for the ContactsApp Sub-Application
Moving the App Initialization Handler
Exercise: Declaring a Template Sub-Module
Solution: Declaring a Template Sub-Module
Creating Tables in Views
Building a CompositeView
Exercise: Building a CompositeView
Solution: Building a CompositeView
Events in CompositeView
Exercise: Events in CompositeView
Solution: Events in CompositeView
Events, Bubbling, and TriggerMethod
Deleting a Contact
Communicating via Events
Adding Animation
Exercise: Events and Bubbling
Solution: Events and Bubbling
Quiz: Events, Bubbling, and Trigger Method
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
Managing Routing Issues for Nonexistent Contacts
Exercise: Implementing Routing
Solution: Implementing Routing
Quiz: Implementing Routing
Dealing with Persisted Data
Adding Local Storage and a Location to Our Entities
Loading Contacts
Deleting a Contact
Quiz: Dealing with Persisted Data
Handling Data Latency
Delaying our Contact Fetch
Add Deferreds
Add a Loading View
Exercise: Displaying a Loading View
Solution: Displaying a Loading View
Passing Parameters to Views and SerializeData
Quiz: Handling Data Latency
Managing Forms
Editing a Contact
Edit Button
Saving the Modified Contact
Validating Data
Displaying a Modal Window
Implementing Modal View
Implementing the Modal Functionality
Handling the Modal Form Data
Complex Views and Base Views
Subdividing Complex Views with Layouts
Extending from Base Views
Positioning the Newly Added Contact
Some Cleanup
Quiz: Complex Views and Base Views
Managing Dialogs with a Dedicated Region
Cleaning Up Our Modal Dialog Code
Customizing onRender
Filtering Contacts
Adding Filtering Contacts to our Application
Using Filtered Collection
Implementing an Empty View
Optional Routes and Query Strings
Quiz: Filtering Contacts
Addition to Sub-Application
The About 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
Conclusion
Contact Manager Application
Closing Thoughts
Appendix: Using Web Storage for Persistence
Implementation Strategy
Proxying the Constructor
Using a Mixin with Underscore
Determining the Storage Key
Calling the Constructor with the Apply Function
Appendix: Creating a FilteredCollection
Creating a New File for Collection
Managing Cases
Home
Courses
Introduction to Marionette.js – The Backbone Framework
Exercise: Events and Bubbling
Test your knowledge about bubbling an event from child views in Marionette.
We'll cover the following...
Event bubbling from child views
Code playground
...
Ask