Question

I am creating a contact Manager using backbone.js,this is my code

$(document).ready(function() {

var Contact=Backbone.Model.extend({
defaults: {
    fname : '',
    lname : '',
    phoneno : ''
}
});

var ContactList=Backbone.Collection.extend({
model : Contact,
localStorage: new Store("ContactList-backbone")
});


var ContactView=Backbone.View.extend({
    el : $('div#contactmanager'),


 events: {
      'click #additems' : 'add'

      },

 initialize: function() {   

    this.render();  

    this.collection = new ContactList();
},

add : function() {

 s1=$('#fname').val();
 s2=$('#lname').val();
 s3=$('#phoneno').val();
 if(s1 =="" || s2=="" || s3=="")
 {
    alert("Enter values in Textfield");
 }
 else
 {  
    $('#tlist').append("<tr><td>"+s1+"</td><td>"+s2+"</td><td>"+s3+"</td>   </tr>");

    cont=new Contact({fname:s1,lname:s2,phoneno:s3});
    this.collection.add(cont);

    cont.save();



}


},

render : function() {

    $(this.el).append("<label><b>First Name</b></label><input id= 'fname' type='text' placeholder='Write ur first name'></input>");
    $(this.el).append("<br><label><b>Last Name</b></label><input id= 'lname' type='text' placeholder='Write ur last name'></input>");
    $(this.el).append("<br><label><b>Phone Number</b></label><input id= 'phoneno' type='text' placeholder='Write ur phone number'></input>");
    $(this.el).append("<br><button id='additems'>ADD</button>");


     var showdata=localStorage.getItem('ContactList-backbone',this.model);
    console.log(showdata,"showdata");

    }
    return this;        
},

});

var contactManager=new ContactView();

});

This is how I used localstorage

function S4() {

   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

};
function guid() {

  return (S4());

};

var Store = function(name) 
{

  this.name = name;

  var store = localStorage.getItem(this.name);

  this.data = (store && JSON.parse(store)) || {};

};

_.extend(Store.prototype, 
{

    save: function() {

      localStorage.setItem(this.name, JSON.stringify(this.data));

    },

create: function(model) {

    if (!model.id) model.id = model.attributes.id = guid();
    this.data[model.id] = model;
    this.save();
    return model;

},

Backbone.sync = function(method, model, options) {

  var resp;
  var store = model.localStorage || model.collection.localStorage;

  switch (method) {

    case "create":  resp = store.create(model);                            break;

    //I am using only create

  }

  if (resp) {

    options.success(resp);

  }
 else {

  options.error("Record not found");

  }

};

The data is getting stored in local storage.
But I can’t figure out how to show this data in my table when the page is reloded.
For eg: Iwant to show first name,lname and phone no in table ;
I am new to backbone so plz do help me

Answer 1

Basically you will want to bind the add event in your collection which gets will get called for each item that is being added to the collection and then in the function your binding it to add the code to add the rows to your table. Also you will want to remove the code that is in your current add method that adds the row since it will now be generated when the item gets added to your collection.

Using your code as a base something along the lines of

var ContactView=Backbone.View.extend({

    el : $('div#contactmanager'),

 events: {
      'click #additems' : 'add'
      },

 initialize: function() {   

    this.render();  

    this.collection = new ContactList();
    this.collection.bind('add', this.addContact, this);
},

addContact: function(contact) {
    //this will get called when reading from local storage as well as when you just add a 
    //model to the collection
    $('#table').append($('<tr><td>'  + contect.get('name') + </td></tr>'));     
 } 

Another point being that you have already have underscore.js on your page (since its a requirement for backbone.js) you may want to consider moving your code to generate html to a underscore.js template.
http://documentcloud.github.com/underscore/#template