Create a contact management system with Backbone.js (iv)

Original: Build a Contacts Manager Using Backbone.js:Part 4

The fourth part of this tutorial series teaches us how to edit and save existing contacts.

This tutorial is based on the first three tutorials in this series. Please read the first three parts before you are clear.

Begin

Add an Edit button to the contact original template.

<class= "edit">edit</button>

Add a new edit template under the original contact display template

<ScriptID= "Contactedittemplate"type= "Text/template"><Form Action="#">    <input type="file"value="<%= Photo%>" />    <Input Class="name"value="<%= name%>" />    <Input ID="type"type="Hidden"value="<%= type%>" />    <Input Class="Address"value="<%= Address%>" />    <Input Class="Tel"value="<%= Tel%>" />    <Input Class="Email"value="<%= Email%>" />    <Button Class="Save">Save</button>    <Button Class="Cancel">Cancel</button></form></Script>

Add new events as needed in events in Contactview

"Click Button.edit": "Editcontact",    //Click class= "Edit" button to perform "Change Select.type": "AddType",  class= "Click Button.save" when the Select value of "type  " is changed: "Saveedits"//click on the button to class= "save" to execute // Click the button class= "Cancel" to execute

Select a contact to edit

Adds a new attribute to the contact model definition, specifying the template to use for the edit status.

Edittemplate: _.template ($ ("#contactEditTemplate"). html ()),

The implementation of the Editcontact method is defined in Contactview.

Editcontact:function () {     This. $el. HTML ( This. Edittemplate ( This. Model.tojson ())); varnewopt = $ ("<option/>", {html:"<em>add new...</em>", Value:"AddType"       }),      This. select = Directory.createselect (). addclass ("type")//Call the directory's Createselect () method to create an existing select control.        The value is the input value of the hidden #type of the current form. . Val ( This. $el. Find ("#type"). Val ()). Append (newopt)//Add a new AddType option to the control. . InsertAfter ( This. $el. Find (". Name"));     Place the generated DOM content behind a control that class= "name".  This. $el. Find ("input[type= ' hidden ')"). Remove (); Delete the original hidden #type input.},

Add a new type

When you modify the contact, it is possible to modify the type to a value that has not been used before. So we need to add a new method for Contactview

        function () {            if (this. Select.val () = = = "AddType") {//If the option for the                current select is AddType
   
    this
    . Select.remove (); Delete the Select control                $ ("<input/>"
    ,                    {"class": "Type"
                    }). InsertAfter ( 
    this. $el. Find (". Name")
    . focus ();  Add an input control class= "type" after class= "name" Control.            }        ,
   

Update Contact

After editing, we also need to save the results of the edits: Add the Saveedits method to the Contactvew.

Saveedits:function(e) {e.preventdefault (); varFormData ={}, prev= This. Model.previousattributes (); $ (e.target). Closest ("Form"). Find (": Input"). Add (". Photo"). each (function() {//loop all input under formvarEl = $ ( This); Formdata[el.attr ("Class")] =El.val ();     Class name attribute to Formdata}); if(Formdata.photo = = = "") {        DeleteFormdata.photo; If photo is empty, use the default value} This. Model.set (FormData);  This. render (); if(Prev.photo = = = "/img/placeholder.png") {        DeletePrev.photo; } _.each (Contacts,function(Contact) {if(_.isequal (Contact, prev)) {Contacts.splice (_.indexof (Contacts, contact),1, FormData); }    });},

If we choose to give up our edits, Contactview also needs a way to cancel the edits.

function () {    this. Render ();},

That's the way it ends.

This section of the code download:

Http://cdn.tutsplus.com/net/uploads/legacy/1147_bb3and4/4/demo.zip

Note: A lot of code in the original content is problematic. However, the downloaded code will be operational. CSS file I am too concerned about the basic copy of the download after the source file.

Create a contact management system with Backbone.js (iv)