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

Posted 2023-03-05

【中文标题】Backbone.js：设置本地存储只需一行？

【英文标题】：Backbone.js: just one line to set local storage?

【发布时间】：2012-09-14 06:38:39

【问题描述】：

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

我有一个这样定义的集合

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

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

据我所知，这就是我需要做的所有事情才能让本地存储正常工作（除了将其包含在主干.js 下）

我不确定的一件事是，“friends-list”这个名称是否必须与 DOM 元素相对应？我正在尝试保存“朋友列表”，所以我将其称为本地存储，但是，本地存储似乎不需要传递类或 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");
    
)

【参考方案1】：

来自fine manual：

很简单的一个用于 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.
,

您可能还想在 friend_model.save() 上使用 success 和 error 回调。

由于您不是 fetching 任何东西，因此您不会使用 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/

【讨论】：

感谢您的回答。我将您的代码复制并粘贴到我的本地主机中。小提琴上没有显示一个小问题。当我刷新页面时，所有的朋友都消失了。但是，如果我添加了一个新朋友，那么所有的朋友都是从 localhost 中检索的，新朋友添加在底部。如果我再次刷新页面，它们都会消失，只有在我添加新朋友时才会重新出现。你知道为什么会这样吗？如果您有时间解释，请提前感谢。但是，在这个演示应用程序hiree.amberfeng.com 我正在尝试学习，它们不会在页面刷新时消失

@user1647484：听起来你在初始化时没有渲染视图。小提琴和你的代码有什么不同？

我的代码和小提琴完全一样。我将小提琴中的代码复制并粘贴到我的编辑器中，并确保库是相同的版本。

您是否尝试过在fetch 上使用success 和error 回调来查看发生了什么？

我用我尝试的成功/错误回调更新了 OP，但控制台中没有显示任何内容。