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

});

これが私が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");

  }

};

データはローカルストレージに保存されています。しかし、ページが再ロードされたときにこのデータをテーブルに表示する方法がわかりません。例：テーブルに名、名前、電話番号を表示したい; 私はバックボーンに慣れていないので、plzは私を助けてくれます

4

2 に答える 2

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 に答える
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>'));     
 }

もう1つのポイントは、ページにすでにunderscore.jsが含まれていることです（backbone.jsの要件であるため）。コードを移動して、htmlを生成するunderscore.jsテンプレートを検討することをお勧めします。 http://documentcloud.github.com/underscore/#template

于 2012-05-16T21:36:12.197 に答える