在 Backbone.js 中使用 localStorage

Question

我正在整理一个主干示例，其中创建了模型并进行了编辑和删除。我能够将新模型和编辑保存到本地存储，但是在刷新本地存储以正确显示时遇到问题。它似乎是作为单个对象加载的，因此无论添加多少个模型，它都会给我一个模型。

 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

您需要将项目添加到您的集合中，然后要读取它，您需要调用 fetch。您的对象中还有几个额外的尾随逗号。

这是您的代码稍作修改的版本，似乎可以正常工作。

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

编辑：我看到您正在尝试读取存储在“store-name”下的本地存储中的值，backbone-localStorage 的工作方式是它使用商店的名称（在您的案例“商店名称”）来存储其余模型的 id，然后将每个模型保存在商店名称和 id 的组合下，所以假设您有三个模型，最终会在本地有 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

编辑 2

这是一个指向您的代码的jsfiddle 的链接，首先我将注释掉thingsList.fetch(); 行，取消注释该行并注释掉thingsList.add(things); 并再次运行它，它应该会拉取模型来自本地存储（我在那里留下了警报）。

Answer 2

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