Switching Edit and View mode for user data

Unknown 18:22:00 Leave a Comment

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

Main container for the view.

?
1
2
3
4
5
<div class="col-md-6">
      <div class="contact-form-container" id="contact-form-container">
 
      </div>
</div>

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

?
1
2
3
4
5
6
7
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="handlebars/template" id="save-template">
<div class="contact-form-view clearfix" >
  <div class="form-group row">
     <label for="name" class="col-sm-2 control-label">Name</label>
     <div class="col-sm-10">
       <p>{{name}}</p>
     </div>
  </div>
  <div class="form-group row">
     <label for="email" class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
       <p>{{email}}</p>
     </div>
  </div>
  <div class="form-group row">
     <label for="message" class="col-sm-2 control-label">Message</label>
     <div class="col-sm-10">
       <p>{{message}}</p>
     </div>
  </div>
  <div class="form-group row">
     <div class="col-sm-10 col-sm-offset-2">
       <input name="edit" type="button" value="Edit" class="btn btn-primary edit-button" >
     </div>
  </div>
</div>
</script>

Edit Template

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="handlebars/template" id="edit-template">
<form class="contact-form clearfix" id="contact-form">
   <div class="form-group row">
      <label for="name" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="{{name}}" >
      </div>
   </div>
   <div class="form-group row">
      <label for="email" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
         <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="{{email}}">
      </div>
  </div>
  <div class="form-group row">
      <label for="message" class="col-sm-2 control-label">Message</label>
      <div class="col-sm-10">
         <textarea class="form-control" rows="4" name="message">{{message}}</textarea>
      </div>
  </div>
  <div class="form-group row">
      <div class="col-sm-10 col-sm-offset-2">
         <input name="submit" type="submit" value="Save" class="btn btn-success save-button" >
      </div>
  </div>
</form>
</script>

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.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button>
           <h4 class="modal-title" id="contactModalLabel"> Edit Contact Form</h4>
        </div>
        <div class="modal-body">
           <div id="edit-form-container">
                <!-- This is placeholder for contact form edit -->
           </div>
        </div>
      </div>
   </div>
</div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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.

Next PostNewer Post Previous PostOlder Post Home

0 comments:

Post a Comment

Copyright © 2014 • Debasis Panda