Backbone.js：只需一行就可以设置本地存储？

演示小提琴（有问题）

我有一个这样定义的集合

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

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

据我所知，这就是让本地存储正常工作所需要做的全部工作（除了将其包含在backbone.js下面）

有一件事我不确定，“好友列表”的名称是否必须对应于DOM元素？我试图保存“好友列表”，所以我称之为本地存储，然而，本地存储似乎不需要传递类或id

这是一把小提琴，你可以看到我在做什么

在我的本地站点上，我添加了几个朋友，刷新了页面，但是这些朋友不会再出现

更新

我在本地站点的代码中也做了以下工作

console.log(Backbone.LocalStorage); 

它没有抛出错误

我的调试尝试

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

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

从：

非常简单，它是一个用于主干网的本地存储适配器。它是Backbone.Sync（）处理保存到本地存储数据库的替代品

此LocalStorage插件只是主干.Sync的一个替代品，因此您仍然需要访问您的模型和集合

因为您没有保存任何内容，所以从未将任何内容放入本地存储数据库。您需要保存您的模型：

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

您还需要更新

渲染

，才能渲染整个集合：

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”

事件来改善这一点

---

还有你的小提琴的精装版：

谢谢你的回答。我将您的代码复制并粘贴到本地主机中。有一个小问题没有出现在小提琴上。当我刷新页面时，所有的朋友都消失了。但是，如果我添加了一个新朋友，那么所有的朋友都将从localhost中检索，并在底部添加新朋友。如果我再次刷新页面，它们都会消失，只有在我添加新朋友时才会重新出现。你知道为什么会这样吗？如果您有时间解释，请提前感谢。然而，在这个我试图学习的演示应用程序中，它们并没有在页面上消失refresh@user1647484：听起来好像在初始化时没有渲染视图。小提琴和你的代码有什么不同？我的代码和小提琴完全一样。我将小提琴上的代码复制并粘贴到我的编辑器中，并确保库的版本相同。您是否尝试过在

获取

上使用

成功

和

错误

回调来查看发生了什么？我用我尝试过的成功/错误回调更新了OP，但控制台中没有显示任何内容。

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