Question

我正在使用backbone.js创建一个联系人管理器，这是我的代码

$(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();

});

这就是我使用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");

  }

};

数据存储在本地存储中。但是，当页面被重新播放时，我无法弄清楚如何在我的表中显示这些数据。例如：Iwant在表格中显示名字，姓名和电话号码; 我是骨干的新手，所以PLZ帮助我

Answer 1

因为您只使用create，所以您永远不会点击read。通过添加read方法

替换switch语句

switch (method) 
{
case "read":    
    resp = model.id != undefined ? store.find(model) : store.findAll(); 
    break;
case "create":  
    resp = store.create(model); 
    break;
}

Answer 2

基本上你需要绑定你的集合中的add事件，它将被添加到集合中的每个项目调用，然后在函数中绑定它以添加代码以将行添加到表中。此外，您还需要删除当前添加方法中添加行的代码，因为现在将项目添加到您的集合时会生成该代码。

使用您的代码作为

的基础

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>'));     
 }

另一点是你的页面上已经有了underscore.js（因为它需要backbone.js）你可能需要考虑移动代码来生成html到underscore.js模板。 http://documentcloud.github.com/underscore/#template

如何在我的表中显示存储在本地存储中的数据

2 个答案: