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);
    }
  });
});
The complete Contact Manager application