Contact Manager Application
Look at the steps taken to build our application using Marionette.js.
We'll cover the following...
Let’s take a look at the steps we followed, along with the concepts discussed briefly while building our contact management application.
Summary
We covered the following steps while developing our application:
-
Basic structure: We organized our assets and created a basic structure for our project.
-
Views vs. templates: We understood the difference between views and templates and learned about various view attributes.
-
Default views: We learned to display a model with default values and used events to generate alerts that included the model’s data.
Contacts list: Using
CollectionView, we listed our collection and applied sorting by using the comparator option.Column headers: We added tables with column headers for displaying our contacts collection on the application’s main page by using
CompositeView.The “Delete” and “Show” buttons: We added the functionality to the “Delete” and “Show” buttons using events, bubbling, and triggers while animating them in the display.
Routing: We added routing to our application for quicker navigation using Marionette and implemented a view for nonexistent contacts.
Web storage: We added persistence for our application to retain the data modified by the user.
Adding new contacts: We added the functionality of creating new contacts in our application by sub-dividing our complex views and extending from base views while discussing the difference between direct inheritance (duplicated behavior) and using base views (shared behavior).
Filtering contacts: We added the functionality to filter contacts by both input-based search and by navigating via routing directly to the desired contacts using optional routes and query strings.
Sub-application: We created a sub-application and its sub-modules, including views and controllers.
Enabling navigation: We added navigation with the brand and highlighting menu clicks.
Complete project
Here is our complete project with all the files we created along the way!
ContactManager.module("Common.Views", function(Views, ContactManager,
Backbone, Marionette, $, _){
Views.Loading = Marionette.ItemView.extend({
template: "#loading-view",
title: "Loading Data",
message: "Please wait, data is loading.",
serializeData: function(){
return {
title: Marionette.getOption(this, "title"),
message: Marionette.getOption(this, "message")
}
},
onShow: function(){
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: "#000", // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: "spinner", // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: "30px", // Top position relative to parent in px
left: "auto" // Left position relative to parent in px
};
$("#spinner").spin(opts);
}
});
});