Switching Edit and View mode for user data

We can edit and save user data and save the input from the user to the view.

Main container for the view.

Then we need to create a view and events for the view.

var ContactForm = Backbone.View.extend({
      el: '#contact-form-container',          // Wrapper of the view
      events: {
        'click .edit-button': 'editForm',    // Event for edit form 
        'click .save-button': 'saveForm',    // Event for save form
      },
});

View Template

Edit Template

Then we need templates for two different view and here we are using handlebars template as follows

We need an initialize method which will create the general view while the page is loading. For that we need a model also. So we can do that as follows.

var ContactForm = Backbone.View.extend({
    el: '#contact-form-container',          // Wrapper of the view
    events: {
       'click .edit-button': 'editForm',    // Event for edit form 
       'click .save-button': 'saveForm',    // Event for save form
    },
    initialize: function () {
        var self = this;
        // Initial model for the view .
        this.contactData = {
            name: 'Debasis Panda',
            email: 'imdebasispanda@live.com',
            message: 'Debasis Panda: This is my message. This is my message. 
                     This is my message. This is my message. 
                     This is my message. This is my message.'
        }
         

});

Then we need a method which will dynamically compile templates and create view.

var ContactForm = Backbone.View.extend({
    el: '#contact-form-container',          // Wrapper of the view
    events: {
        ...
    },
    initialize: function () {
        var self = this;
        // Initial model for the view .
        this.contactData = {
             name: 'Debasis Panda',
             email: 'imdebasispanda@live.com',
             message: 'Debasis Panda: This is my message. This is my message. 
                      This is my message. This is my message. 
                      This is my message. This is my message.'
       }

       this.getTemplate(this.saveTemlate);
       $(document).on('click', '.save-button', function (e) {
           e.preventDefault();
           self.saveForm();
       });
    },
    getTemplate: function (templateId) {
       var html;
       var self = this;
       var template = Handlebars.compile($('#' + templateId).html());
       html = template(self.contactData);
       $(this.el).html(html);

    },
    
});

Once the default view is loaded then we will have an edit button. When we click the edit button it should generate a edit mode for the view. We can show the edit template in a modal as follows.

   

      

        

           
           
 Edit Contact Form
        
        

           

                
           
        
      
   

var ContactForm = Backbone.View.extend({
    el: '#contact-form-container',          // Wrapper of the view
    events: {
        ...
    },
    initialize: function () {
        ...
    },
    getTemplate: function (templateId) {
        ...
    },
    // Load the edit template in the modal.            
    editForm: function () {
       this.el = '#edit-form-container';
       this.getTemplate(this.editTemplate);
       $('#contactModal').modal('show');
    },             

});

Once the edit template is loaded we need to bind the click event for the save button and we need to save the data in the model.

var ContactForm = Backbone.View.extend({
   el: '#contact-form-container',          // Wrapper of the view
   events: {
      ...
   },
   initialize: function () {
      ...
   },
   getTemplate: function (templateId) {
      ...

   },
   // Load the edit template in the modal.            
   editForm: function () {
      this.el = '#edit-form-container';
      this.getTemplate(this.editTemplate);
      $('#contactModal').modal('show');
   }, 
   saveData: function (callback) {
      self = this;
      $.each($('#contact-form').serializeArray(), function (_, form) {
          self.contactData[form.name] = form.value;
      });
   }           

});

Once the data is saved then we need to render the default view with the new data.

var ContactForm = Backbone.View.extend({
   el: '#contact-form-container',          // Wrapper of the view
   events: {
       ...
   },
   initialize: function () {
       ...
   },
   getTemplate: function (templateId) {
       ...

   },
   // Load the edit template in the modal.            
   editForm: function () {
       ...
            }, 
             
   // Load the save template in the page container when the data is saved
   saveForm: function () {
       self = this;
       self.el = '#contact-form-container';

       self.saveData(function () {
            self.getTemplate(self.saveTemlate);
            $('#contactModal').modal('hide');
       });

   },
   saveData: function (callback) {
       self = this;
       $.each($('#contact-form').serializeArray(), function (_, form) {
           self.contactData[form.name] = form.value;
       });

       if (callback) {
           callback();
       };
   }         

});
var contactForm = new ContactForm();

Here is the example below.

Thank you for visiting.