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.
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.
