Backbone.jsのlocalStorageを使用

Question

私は、モデルを編集して削除したバックボーンの例をまとめています。新しいモデルを保存してローカルストレージに編集することはできますが、ローカルストレージをリフレッシュ時に正しく表示するには問題があります。それは単一のオブジェクトとして読み込まれているようですので、追加された数にかかわらず私に1つのモデルを与えます。

var Thing = Backbone.Model.extend({ 
    defaults: { 
     title: 'blank' 
    } 
}); 
var ThingView = Backbone.View.extend({ 
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'), 
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'), 
    events: { 
     "click #remove": "deleteItem", 
     "click #edit": "editItem", 
     "click #save": "saveItem", 
    }, 
    deleteItem: function() { 
     console.log('deleted'); 
     this.model.destroy(); 
     this.remove(); 
    }, 
    editItem: function() { 
     console.log('editing'); 
     this.$el.html(this.editTemplate(this.model.toJSON())); 
    }, 
    saveItem: function() { 
     console.log('saved'); 
     editTitle = $('input.name').val(); 
     console.log(editTitle); 
     this.model.save({ 
      title: editTitle 
     }); 
     this.$el.html(this.template(this.model.toJSON())); 
    }, 
    render: function() { 
     var attributes = this.model.toJSON(); 
     this.$el.append(this.template(attributes)); 
     return this; 
    } 
}); 
var ThingsList = Backbone.Collection.extend({ 
    model: Thing, 
    localStorage: new Store("store-name"), 
}); 
var storeVar = localStorage.getItem("store-name"); 
console.log(storeVar); 
var thingsList = new ThingsList; 
thingsList.reset(storeVar); 
var ThingsListView = Backbone.View.extend({ 
    el: $('body'), 
    events: { 
     'click #add': 'insertItem', 
    }, 
    initialize: function() { 
     this.render(); 
     this.collection.on("add", this.renderThing, this); 
    }, 
    insertItem: function (e) { 
     newTitle = $('input').val(); 
     newThing = new Thing({ 
      title: newTitle 
     }); 
     this.collection.add(newThing); 
     newThing.save(); 
     console.log(this.collection.length); 
    }, 
    render: function() { 
     _.each(this.collection.models, function (items) { 
      this.renderThing(items); 
     }, this); 
    }, 
    renderThing: function (items) { 
     var thingView = new ThingView({ 
      model: items 
     }); 
     this.$el.append(thingView.render().el); 
    } 
}); 
var thingsListView = new ThingsListView({ 
    collection: thingsList 
}); 

Answer 1

var Thing = Backbone.Model.extend({ 
    defaults: { 
     title: 'blank' 
    } 
}); 
var ThingView = Backbone.View.extend({ 
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'), 
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'), 
    events: { 
     "click #remove": "deleteItem", 
     "click #edit": "editItem", 
     "click #save": "saveItem", 
    }, 
    deleteItem: function() { 
     console.log('deleted'); 
     this.model.destroy(); 
     this.remove(); 
    }, 
    editItem: function() { 
     console.log('editing'); 
     this.$el.html(this.editTemplate(this.model.toJSON())); 
    }, 
    saveItem: function() { 
     console.log('saved'); 
     editTitle = $('input.name').val(); 
     console.log(editTitle); 
     this.model.save({ 
      title: editTitle 
     }); 
     this.$el.html(this.template(this.model.toJSON())); 
    }, 
    render: function() { 
     var attributes = this.model.toJSON(); 
     this.$el.append(this.template(attributes)); 
     return this; 
    } 
}); 
var ThingsList = Backbone.Collection.extend({ 
    model: Thing, 
    localStorage: new Store("store-name"), 
}); 
var storeVar = localStorage["store-name-7ee7d1e3-bbb7-b3e4-1fe8-124f76c2b64d"]; 
console.log(storeVar); 
var thingsList = new ThingsList; 
//thingsList.reset(storeVar); 
var ThingsListView = Backbone.View.extend({ 
    el: $('body'), 
    events: { 
     'click #add': 'insertItem', 
    }, 
    initialize: function() { 
    thingsList.fetch(); 
    thingsList.toJSON(); 
     this.render(); 
     this.collection.on("add", this.renderThing, this); 
    }, 
    insertItem: function (e) { 
     newTitle = $('input').val(); 
     newThing = new Thing({ 
      title: newTitle 
     }); 
     this.collection.add(newThing); 
     newThing.save(); 
     console.log(this.collection.length); 
    }, 
    render: function() { 
     _.each(this.collection.models, function (items) { 
      this.renderThing(items); 
     }, this); 
    }, 
    renderThing: function (items) { 
     var thingView = new ThingView({ 
      model: items 
     }); 
     this.$el.append(thingView.render().el); 
    } 
}); 
var thingsListView = new ThingsListView({ 
    collection: thingsList 
}); 

Answer 2

あなたのコレクションにアイテムを追加してから、読み込んでfetchを呼び出す必要があります。あなたのオブジェクトには余分な末尾のカンマも2つあります。

ここでは動作するように思われる少し修正されたコードがあります。

var Thing = Backbone.Model.extend({ 
    defaults:{ 
    title:'blank' 
    } 
}); 

var ThingView = Backbone.View.extend({ 
    //el: $('body'), 
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'), 
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'), 


    events: { 
    "click #remove": "deleteItem",  
    "click #edit": "editItem", 
    "click #save": "saveItem", 
    }, 

    deleteItem: function(){ 
     console.log('deleted'); 

      this.model.destroy(); 
      //remove view from page 
      this.remove(); 
    }, 

    editItem: function(){ 
    console.log('editing'); 
    this.$el.html(this.editTemplate(this.model.toJSON())); 
    }, 

    saveItem: function(){ 
    console.log('saved'); 
    editTitle = $('input.name').val(); 
    console.log(editTitle); 
    this.model.save({title: editTitle}); 
    this.$el.html(this.template(this.model.toJSON())); 
    }, 

    render: function(){ 
     var attributes = this.model.toJSON(); 
     this.$el.append(this.template(attributes)); 
     return this; 
    } 
}); 

var storeVar = localStorage.getItem("store-name"); 

var ThingsList = Backbone.Collection.extend({ 
    model: Thing, 
    localStorage: new Store("store-name") 
}); 

var things = [ 
    { title: "Macbook Air", price: 799 }, 
    { title: "Macbook Pro", price: 999 }, 
    { title: "The new iPad", price: 399 }, 
    { title: "Magic Mouse", price: 50 }, 
    { title: "Cinema Display", price: 799 } 
]; 

console.log(things); 

var thingsList = new ThingsList; 

var ThingsListView = Backbone.View.extend({ 
    el: $('body'), 

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

initialize: function() { 
    this.render(); 
    this.collection.on("add", this.renderThing, this); 
    }, 


    insertItem: function(e){ 
     newTitle = $('input').val(); 
     newThing = new Thing({ title: newTitle }); 
     this.collection.add(newThing); 
     newThing.save(); 
     //this.model.saveItem; 
     console.log(this.collection.length); 
    }, 


    render: function(){ 
    _.each(this.collection.models, function (items) { 
      this.renderThing(items); 
     }, this); 
    }, 


    renderThing: function(items) { 
    //console.log('added something'); 
    var thingView = new ThingView({ model: items }); 
     items.save(); 
    this.$el.append(thingView.render().el); 
    } 

}); 

var thingsListView = new ThingsListView({collection: thingsList}); 
thingsList.fetch(); 
console.log(thingsList.toJSON()); 
thingsList.reset(things); 

編集：私はバックボーンのlocalStorageが動作する方法は、それはあなたに店の名前を（使用していることで、あなたは「店舗名」の下に、ローカルストレージに格納されている値を読み込むしようとしている参照ケース "Store-name"）を使用して残りのモデルのIDを保存し、各モデルをストア名とIDの組み合わせで保存すると、3つのモデルがあるとしたら、ローカルストレージに4つのエントリ、

localStorage["store-name"] //id1, id2, id3" 
    localStorage["store-name-id1"] //model with id1 
    localStorage["store-name-id2"] // model with id2 
    localStorage["store-name-id3"] // model with id3 

EDIT 2

ここにコードのjsfiddleへのリンクがあります。開始するにはthingsList.fetch();の行をコメントアウトし、その行のコメントを外してthingsList.add(things);をコメントアウトしてもう一度実行し、モデルをローカルストレージからプルする必要がありますその中にアラートがあります）。