Backbone.js Series Tutorial 13: Creating a simple Contact application

Overview

Imagine that you are using a spreadsheet tool. First create a form called a contact (that is, a collection), and then define the data field headings in the form, and enter "first name", "Last Name", and "phone" (a model) in the title. Basically, you already have an electronic form to keep contact data ({firstName: "Jane, LastName:" Doe ", Phone:" 111-111-1111 "}). Now you want to use this information from the form to create a UI (a view) to view/Add/Remove Contacts. Backbone can do it! Let's get started!

Inherit Backbone.model, create the contact function/class

 
  
  

  
   
   
var contact = Backbone.Model.extend ({
  
   
   
Defaults: {
  
   
   
Firstname:null,
  
   
   
Lastname:null,
  
   
   
Phone:null
  
   
   
},
  
   
   
Getfullname:function () {
  
   
   
Return This.get ("firstName") + "" + This.get ("LastName");
  
   
   
}
  
   
   
});
 
  
  

Instantiate the Contacts collection, passing a model constructor/category to a contact

 
  
  

  
   
   
var contacts = new Backbone.collection ({//Add some data for it
  
   
   
FirstName: "Jane",
  
   
   
LastName: "Doe",
  
   
   
Phone: "111-111-1111"
  
   
   
}, {
  
   
   
Model:contact
  
   
   
});
 
  
  

Inherit Backbone.view, create Addcontactsview, instantiate an instance

 
 

  
  

  
var Contactlistview = Backbone.View.extend ({
  
  

  
El: "#contacts",
  
  

  
Events: {
  
  

  
"Click Li button": "Removecontact"
  
  

  
},
  
  

  
Initialize:function () {
  
  

  
This.render (); Render List
  
  

  
This.listento (Contacts, "Add Remove", this.render); The Magic
  
  

  
},
  
  

  
Removecontact:function (e) {
  
  

  
$ (e.target). Parent ("Li"). Remove ();
  
  

  
Contacts.findwhere ({
  
  

  
FirstName: $ (e.target). Parent ("Li"). Find ("span"). Text (). Split ("") [0].trim (),
  
  

  
LastName: $ (e.target). Parent ("Li"). Find ("span"). Text (). Split ("") [1].trim ()
  
  

  
}). Destroy (); Internal "Remove" event will be invoked
  
  

  
},
  
  

  
Render:function () {
  
  

  
if (Contacts.length > 0) {
  
  

  
this. $el. empty ();
  
  

  
Contacts.each (function (contact) {
  
  

  
this. $el. Append ("<li><span>" + contact.getfullname () + "</span>" + "/" + contact.get ("phone") + "< Button type= "button" class= "Btn-xs btn-danger removecontactbtn" (">X</button></li>");
  
  

  
}, this);
  
  

  
}
  
  

  
}
  
  

  
});
  
  

  
var contactlistviewinstance = new Contactlistview ();
 
 

Inherit Backbone.view, create Contactlistview, instantiate an instance

 
 

  
  
 
   
var Addcontactsview = Backbone.View.extend ({
 
   
El: "FieldSet",
 
   
Events: {
 
   
"Click button": "Addcontact"
 
   
},
 
   
Addcontact:function () {
 
   
var firstName = this.$ ("#firstName"). Val ();
 
   
var lastName = this.$ ("#lastName"). Val ();
 
   
var phone = this.$ ("#phone"). Val ();
 
   
if (firstName && lastName && phone) {
 
   
Contacts.add ({//will invoke backbone internal "add" event
 
   
Firstname:firstname,
 
   
Lastname:lastname,
 
   
Phone:phone
 
   
});
 
   
this.$ ("Input"). Val ("");
 
   
}
 
   
}
 
   
});
 
   
var addcontactsviewinstance = new Addcontactsview ();
 
  
 
 

Example demonstration

The following is a demonstration of this section's work on the contact application. Review the application code until you fully understand the roles and functions of each part of the creation process (i.e. model, collection, view). You need to refer to the contents of the first few sections.

Conclusion

This article guides the reader through a thorough understanding of backbone views, models, and collections. In the next section of this article, we will try to synchronize and associate the methods of the synchronization model with the collection to the background.