javascript - Backbone.js and localStorage plugin relation between collection and model -- based on official 'todo&#3

admin管理员组

文章数量:1429455

Here's the official sample app:

.html

I am confused about the relationship between the collection and its property localStorage = new Store(..)

Shouldn't this be in the model because you can't do a collection.save() anyway?

In addition, I tried implementing something like it, and it doesn't work

var Person = Backbone.Model.extend({
        defaults: {
            name:'no-name',
            age:0
        }
});


var Persons = Backbone.Collection.extend({
        model: Person,
        localStorage: new Store('Persons'),
        initialize: function(){
            console.log('collection initialized');

        }
});

window.people = new Persons();

var p1 = new Person({name:'JC',age:24});
p1.save({text:'hello'}); //<--- Uncaught TypeError: Cannot read property 'localStorage' of undefined

Can anyone help me figure this out?

Here's the official sample app:

http://documentcloud.github./backbone/docs/todos.html

I am confused about the relationship between the collection and its property localStorage = new Store(..)

Shouldn't this be in the model because you can't do a collection.save() anyway?

In addition, I tried implementing something like it, and it doesn't work

var Person = Backbone.Model.extend({
        defaults: {
            name:'no-name',
            age:0
        }
});


var Persons = Backbone.Collection.extend({
        model: Person,
        localStorage: new Store('Persons'),
        initialize: function(){
            console.log('collection initialized');

        }
});

window.people = new Persons();

var p1 = new Person({name:'JC',age:24});
p1.save({text:'hello'}); //<--- Uncaught TypeError: Cannot read property 'localStorage' of undefined

Can anyone help me figure this out?

• javascript
• backbone.js

Share Improve this question Follow edited Mar 7, 2012 at 3:58 JC JC asked Mar 7, 2012 at 3:15 JC JCJC JC 12.2k1111 gold badges4444 silver badges6363 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's actually the .create() function of a collection that allows the collection to "save" to localStorage.

source-code of todo sample:

createOnEnter: function(e) {
      var text = this.input.val();
      if (!text || e.keyCode != 13) return;
      Todos.create({text: text});
      this.input.val('');
    },

This then allows the model instance to manipulate it using the .save({attr:value}) function.

Calling modelInstance.save() without a defined localStorage property in the model's constructor function will cause the error:

Uncaught TypeError: Cannot read property 'localStorage' of undefined

However, being that the model is now saved in the localStorage through the collectionInstance.create() method, modelInstance.save({attr:value}) can now be used to modify it.

So, in conclusion, Models only has the save() function which allows persistence, but the Collection object has the create() function that allows persistence.

In order to use these, REST urls within the collection and model must be properly set up or the localStorage plugin must be instantiated within the Constructor Function of either (depending on setup)

I had a similar problem in that I wanted to simply 'save' a collection that I had loaded from LocalStorage. I wrote a save() method on my Collections that simply looped through each model and called model.save().

MyCollection.save = ->
    @each (model) ->
        model.save()

There's a big drawback to this, however, with regards to Backbone.LocalStorage. You loose all the great benefits of using Collection.set({ models... }); to update your collection (pulling in an online update, or something) with all the add/merge/delete goodness. Removing the model from your collection at runtime doesn't delete it from local storage, and manually identifying unmatched models and destroying them somewhat defeats the purpose of Backbone.Collection.set();

One solution I found was to augment Backbone such that Backbone.Collection.set() uses destroy() instead of remove() on the models it finds to be missing. (see line 705 of BB 1.0.0)

Another solution, which I wound up going with, was to have all models listen for their own 'remove' event and call their own 'destroy' method when it happens. This allows Backbone.Collection.set()'s removals to bee permanent.

class Model extends Backbone.Model
  initialize: ->
    @on 'remove', @destroy

Both of these mean you can't "remove" a model without destroying it permanently, which was fine for me. If you want, you could probably create some special conditions under which this occurs, and manage it that way.

本文标签：