3

演示小提琴（有问题）http://jsfiddle.net/mjmitche/UJ4HN/19/

我有一个这样定义的集合

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

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

据我所知，这就是我需要做的所有事情来让本地存储工作（除了将它包含在backbone.js下面）

我不确定的一件事是，名称“friends-list”是否必须对应于 DOM 元素？我正在尝试保存“朋友列表”，所以我将其称为本地存储，但是，localstorage 似乎不需要传递类或 id。

这是一个小提琴，您可以在其中看到我正在尝试做的事情http://jsfiddle.net/mjmitche/UJ4HN/19/

在我的本地站点上，我正在添加几个朋友，刷新页面，但这些朋友没有重新出现。

更新

我还在本地站点上的代码中完成了以下操作

console.log(Backbone.LocalStorage);

它不会引发错误。

我的调试尝试

我在 window.AppView 中尝试了这段代码（取自另一个 SO 答案），但控制台中没有出现任何内容。

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

1 回答 1

6

来自精美手册：

很简单的一个用于 Backbone 的 localStorage 适配器。它是 Backbone.Sync() 的替代品，用于处理保存到 localStorage 数据库。

这个 LocalStorage 插件只是 Backbone.Sync 的替代品，所以你仍然需要save你的模型和fetch你的收藏。

由于您没有保存任何内容，因此您永远不会将任何内容放入 LocalStorage 数据库。您需要保存模型：

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.
},

您可能也想使用successanderror回调friend_model.save()。

由于您什么都没有fetch，因此您不会使用 LocalStorage 数据库中的任何内容来初始化您的集合。您需要调用fetch您的集合，并且您可能希望绑定render到它的"reset"事件：

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

您还需要更新您render的才能呈现整个集合：

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

您可以通过将“添加一个模型的视图”逻辑移动到单独的方法并将该方法绑定到集合的"add"事件来改善这一点。

还有一个精简和修复的小提琴版本：http: //jsfiddle.net/ambiguous/haE9K/

于 2012-09-22T03:11:06.330 回答