Backbone.Marionette.js- A Gentle Introduction.png

myapp.tar.gz

marionette_app

run_index

run_index_appjs

run_app_index_contact

run_app_contact_list

run_app_contact_list-copy

run_app_contact_list-template

run_app_contact_list-show

run_app_router

run_app_common_view

run_app_edit

run_app_new_view

run_app_AboutApp

run_app_HeaderSubApp

run_app_HeaderSubApp-list

marionette_app-copy

Marionette is an extension of Backbone that is very popular in building various JavaScript applications with a client-server system. It introduces a method for creating applications where you can define a class object that handles the entire application and acts as its root. 

You’ll learn the differences between views and templates. Next, you will cover displaying a model with a default value and use events to generate alerts. Then you’ll cover collectionView and CompositeView, to list contacts and display the column headers on the application’s main page, respectively. You will also learn to add routing to an application for quick navigation and implement web storage persistence. Then, you will learn how to add navigation and highlight menu items on the application’s main page.

This course will help you build highly interactive JavaScript applications as a web developer. It will further empower you to develop your applications by understanding Marionette.

Introduction to Marionette.js – The Backbone Framework

When elements are nested, how can you prevent them from firing the same event that fires on an inner child?

When elements are nested, how can you prevent them from firing the same event that fires on an inner child?

By adding a template for the specific element

By adding a CSS class to the specific element's template and referencing it as the key in the ``defaults`` object

By adding a CSS class to the specific element's template and referencing it as the key in the ``events`` object

How can the scope of relevant DOM elements be reduced when registering event handlers?

How can the scope of relevant DOM elements be reduced when registering event handlers?

**(True or False)** Event handling requires CSS classes with predefined prefixes.


(True or False) Event handling requires CSS classes with predefined prefixes.

**(True or False)** Given an `ItemView` instance, it's possible to delete the item from the containing collection.


(True or False) Given an <code>ItemView</code> instance, it’s possible to delete the item from the containing collection.

The event will be prefixed with `childview:`.

The event will be prefixed with 
`childview:contact`.

The event will be prefixed with 
`childview:delete`.

We will use `TriggerMethod` for the event.

How can you determine that an event in a `CompositeView` was triggered from within a child `ItemView` rather than from the `CollectionView` itself?


How can you determine that an event in a <code>CompositeView</code> was triggered from within a child <code>ItemView</code> rather than from the <code>CollectionView</code> itself?

**(True or False)** It's possible to react to events without having a `myView.on("some:event", ...)` listener defined for it.


(True or False) It’s possible to react to events without having a <code>myView.on(&quot;some:event&quot;, ...)</code> listener defined for it.

Events, Bubbling, and Trigger Methods

Events, Bubbling, and Trigger Methods

Go ahead and test your knowledge on the concepts of events, bubbling, and trigger method.

Introduction

Displaying a Static View

Displaying a Model

Displaying a Collection of Models

Structuring Code with Modules

Creating Tables in Views

Events, Bubbling, and TriggerMethod

Displaying Contacts in Dedicated Views

Implementing Routing

Dealing with Persisted Data

Handling Data Latency

Managing Forms

Displaying a Modal Window

Complex Views and Base Views

Managing Dialogs with a Dedicated Region

Filtering Contacts

Addition to Sub-Application

Conclusion

Appendix: Using Web Storage for Persistence

Appendix: Creating a FilteredCollection

Quiz: Events, Bubbling, and Trigger Method