mit localStorage in Backbone.js

Question

Ich bin ein Backbone-Beispiel zusammen, in dem Modelle erstellt bearbeitet und gelöscht werden. Ich kann neue Modelle speichern und in den lokalen Speicher ändern, habe aber ein Problem damit, dass der lokale Speicher bei der Aktualisierung korrekt angezeigt wird. Es scheint, als ein einzelnes Objekt geladen zu werden, und gibt mir daher ein Modell unabhängig davon, wie viele hinzugefügt wurden.

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

Sie müssen die Elemente zu Ihrer Sammlung hinzufügen, und um sie dann zu lesen, müssen Sie abrufen abrufen. Sie haben auch ein paar zusätzliche abschließende Kommas in Ihren Objekten.

Hier ist eine leicht modifizierte Version Ihres Codes, die zu funktionieren scheint.

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

Edit: Ich sehe Sie versuchen, im lokalen Speicher gespeichert unter „store-namen“, die Art und Weise Backbone-local arbeitet im Wert zu lesen ist, dass es den Namen des Ladens verwendet (in Ihrem Fall "Store-Name"), um die IDs der übrigen Modelle zu speichern, und speichert dann jedes Modell unter einer Kombination aus dem Geschäftsnamen und der ID. Sagen wir also, Sie hätten drei Modelle, dann hätten Sie 4 Einträge im lokalen Speicher ,

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

Hier ist ein Link zu einem jsfiddle Ihres Codes, um zu starten Ich verlasse die Linie thingsList.fetch(); auskommentiert, kommentieren Sie diese Zeile und Kommentar aus thingsList.add(things); und führen Sie es ein zweites Mal und es sollte die Modelle aus dem lokalen Speicher ziehen (ich verließ eine Warnung in dort).