Backbone.js 如何在我的表中显示存储在本地存储器中的数据

我正在使用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();

});

数据正在存储在本地存储器中。 但是我不知道当页面重新排序时如何在表中显示这些数据。 例如：我想在表格中显示名字、名字和电话号码；

---

我是新加入主干网的，所以请务必帮助我

因为您只使用

创建

，所以您永远不会点击

读取

。通过添加

read

方法将switch语句替换为

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

---

基本上，您需要在集合中绑定add事件，get将为添加到集合中的每个项调用，然后在函数中绑定它以添加代码，将行添加到表中。此外，您还需要删除当前添加行的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>'));     
 } 

var ContactView=Backbone.View.extend({
el:$（'div#contactmanager'），
活动：{
“单击#添加项”：“添加”
},
初始化：函数（）{
这个。render（）；
this.collection=新联系人列表（）；
this.collection.bind（'add'，this.addContact，this）；
},
addContact：功能（contact）{
//当从本地存储读取数据时，以及当您仅添加
//集合的模型
$（'#table'）.append（$（''+contect.get（'name'）+）；
} 

另一点是，你已经在页面上有了不足之处（因为它对Bask.js的要求），你可能需要考虑移动你的代码来生成HTML到一个不足的JS模板。

---

感谢我在我的商店中添加了read，那么我该如何在我的表格中显示我的数据有很多很好的教程，它们解释了如何开始使用主干网，而不仅仅是深入了解主干网并收集一些信息。看看这个简单的例子：从那里开始。var showdata=localStorage.getItem（'ContactList-backbone'，this.model）；console.log（showdata，“showdata”）；它给了我{“12c5”：{“fname”：“Nitish”，“lname”：“pakhare”，“phoneno”：“545454”，“id”：“12c5”}，“5717”；{“fname”：“Arpita”，“lname”：“pakhare”，“phoneno”：“548454”，“id”：“634c”}showdataso如何从中检索fname并添加到表中

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