Backbone.js: just one line to set local storage?

Asked By: Anonymous

demo fiddle (with problem) http://jsfiddle.net/mjmitche/UJ4HN/19/

I have a collection defined like this

var Friends = Backbone.Collection.extend({
    model: Friend,

    localStorage: new Backbone.LocalStorage("friends-list")
});

As far as I’m aware, that’s all I need to do to get local storage to work (in addition to including it below backbone.js)

One thing I wasn’t sure about, does the name “friends-list” have to correspond to a DOM element? I’m trying to save the “friends-list” so I called it that in local storage, however, localstorage doesn’t seem to require passing a class or an id.

Here’s a fiddle where you can see what I’m trying to do http://jsfiddle.net/mjmitche/UJ4HN/19/

On my local site, I’m adding a couple friends, refreshing the page, but the friends are not re-appearing.

Update

I’ve also done the following in my code on my local site

console.log(Backbone.LocalStorage); 

and it’s not throwing an error.

My attempt to debug

I tried this code (taken from another SO answer) in the window.AppView but nothing came up in the console.

this.collection.fetch({}, {
    success: function (model, response) {
        console.log("success");
    },
    error: function (model, response) {
        console.log("error");
    }
})

Solution

Answered By: Anonymous

From the fine manual:

Quite simply a localStorage adapter for Backbone. It’s a drop-in replacement for Backbone.Sync() to handle saving to a localStorage database.

This LocalStorage plugin is just a replacement for Backbone.Sync so you still have to save your models and fetch your collections.

Since you’re not saving anything, you never put anything into your LocalStorage database. You need to save your models:

showPrompt: function() {
    var friend_name = prompt("Who is your friend?");
    var friend_model = new Friend({
        name: friend_name
    });
    //Add a new friend model to our friend collection
    this.collection.add(friend_model);
    friend_model.save(); // <------------- This is sort of important.
},

You might want to use the success and error callbacks on that friend_model.save() too.

Since you’re not fetching anything, you don’t initialize your collection with whatever is in your LocalStorage database. You need to call fetch on your collection and you probably want to bind render to its "reset" event:

initialize: function() {
    _.bindAll(this, 'render', 'showPrompt');
    this.collection = new Friends();
    this.collection.bind('add', this.render);
    this.collection.bind('reset', this.render);
    this.collection.fetch();
},

You’ll also need to update your render to be able to render the whole collection:

render: function() {
    var $list = this.$('#friends-list');
    $list.empty();
    this.collection.each(function(m) {
        var newFriend = new FriendView({ model: m });
        $list.append(newFriend.render().el);
    });
    $list.sortable();
    return this; 
}

You could make this better by moving the “add one model’s view” logic to a separate method and bind that method to the collection’s "add" event.

And a stripped down and fixed up version of your fiddle: http://jsfiddle.net/ambiguous/haE9K/