提取后新保存的 Backbone 模型未出现在集合中

Posted 2023-03-05

【中文标题】提取后新保存的 Backbone 模型未出现在集合中

【英文标题】：Newly saved Backbone model does not appear in collection after fetch

【发布时间】：2013-06-10 09:26:40

【问题描述】：

我正在使用主干本地存储并遇到一些奇怪的行为。

我有一个定义、实例化和获取的模型和集合：

MyModel = Backbone.Model.extend(
        localStorage: new LocalStore('example-myModels')
        //note: LocalStore = Backbone.LocalStore -> https://github.com/jeromegn/Backbone.localStorage
);

MyCollection = Backbone.Collection.extend(
        model : MyModel,
        localStorage: new LocalStore('example-myModels')
);

var myCollection = new MyCollection();
myCollection.fetch(...);

然后，此集合将作为列表显示给用户。用户可以向集合中“添加”一个项目，最终生成以下代码：

var newModel = new MyModel();
newModel.save(newModelAttributes, 
    success: function(newlySavedModel) 
        myCollection.add(newlySavedModel);
    
);

此时 myCollection 有了新添加的模型，我可以在我的 localStorage 数据库中看到成功创建的记录：

预存本地存储：

保存后的本地存储：

用户添加记录后的下一步是返回列表，此时再次获取集合：

myCollection.fetch();

现在 myCollection 不再包含新记录。无论我获取多少次，都不会检索到新记录——即使我可以在我的 localStorage 数据库中看到它。我也尝试过创建 Collection 的新实例并获取它，但它会产生相同的结果。如果我重新加载浏览器，新记录会按预期显示。有人知道发生了什么吗？我觉得我在这里缺少一些基本的东西......

可在此处找到重现该问题的运行示例：http://jsbin.com/iyorax/2/edit（确保控制台可见并单击“使用 JS 运行”）

提前致谢！

【问题讨论】：

如果你调用myCollection.fetch(reset: true);，新记录是否存在？

“reset: true”不走运 :(

这种情况发生在 Js fiddle 中吗？可能有助于复制和诊断

感谢您的建议。我在问题中添加了指向 jsbin 的链接，它确实重现了该问题（至少在 Chrome 和 Firefox 中）。

【参考方案1】：

我有一个使用 Backbone.localstorage 的应用程序，对我有用的是我首先将模型添加到集合中，然后调用 save 到模型中。像这样。

var newModel = new MyModel();
myCollection.add(newModel)
newModel.save();

我不是 100% 确定，但我的理由是，您的模型已保存，但您的集合未保存，并且可能没有更新索引，并且在您调用 fetch 时，您正在获取未更新的集合。

希望对您有所帮助。

【讨论】：

谢谢！这看起来真的很有希望！不幸的是，我只是尝试过，没有运气。行为与我 add() 后 Collection 包含正确数量的元素的情况完全相同，但是当我重新获取时，我丢失了添加的元素。在页面重新加载之前，有关 fetch 的某些内容不会获取对 LocalStorage 所做的更改。

【参考方案2】：

我能想到模型不存在于集合中的唯一原因是ID重复

我没有看到模型上定义的 IdAttribute。有时这可能是个问题。

【讨论】：

谢谢！我在上面的问题中添加了一些我的 LocalStorage 的屏幕截图。我看不出 ID 有什么问题，但如果有任何问题，请告诉我。

【参考方案3】：

您的模型和您的集合需要共享对同一个 LocalStore 实例的引用，而现在您正在创建两个不同的对象。要解决此问题，请在模型或集合之外创建 LocalStore 对象，并在模型和集合的构造函数中传入对它的引用。

【讨论】：

所以现在一切正常，但我对 LocalStorage 的工作方式有点困惑。即使我在保存模型后实例化 new 集合，新模型也不会出现在我的新集合中 (jsbin.com/iyorax/11/edit)。但它确实出现在页面重新加载时。我知道我的模型中有多个 Backbone.LocalStorage 实例，但我的期望是它们由一个通用的持久存储支持。我错过了什么？