8

モデルを作成、編集、削除するバックボーンの例をまとめています。新しいモデルと編集をローカル ストレージに保存できますが、更新時にローカル ストレージを適切に表示するのに問題があります。単一のオブジェクトとして読み込まれているように見えるため、追加されたモデルの数に関係なく 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
 });
4

2 に答える 2

8

コレクションにアイテムを追加してから、それを読み込むには、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の動作は、ストアの名前（この場合は「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

編集2

コードのjsfiddleへのリンクは次のとおりです。開始するには、行thingsList.fetch();をコメントアウトしたままにし、その行のコメントを解除してコメントアウトし、もう一度thingsList.add(things);実行すると、ローカルストレージからモデルがプルされます（アラートを残しました） 。

于 2012-06-20T16:15:25.433 に答える
8 
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
 });
于 2012-06-27T14:51:26.837 に答える