0

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

});

这就是我使用本地存储的方式

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");

  }

};

数据存储在本地存储中。但是当页面重新加载时，我无法弄清楚如何在我的表格中显示这些数据。例如：我想在表格中显示名字、lname 和电话号码；我是骨干新手，所以请帮助我

4

2 回答 2

0

基本上，您将希望在您的集合中绑定 add 事件，该事件将为添加到集合中的每个项目调用，然后在绑定它的函数中添加代码以将行添加到您的表中。此外，您还需要删除当前 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（因为它是对主干 js 的要求），您可能需要考虑将生成 html 的代码移动到 underscore.js 模板。 http://documentcloud.github.com/underscore/#template

于 2012-05-16T21:36:12.197 回答
0

因为你只是在使用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;
}
于 2012-05-16T10:28:39.360 回答