无法使用 Backbone.js 将数据保存到 localStorage

Posted 2023-03-05

【中文标题】无法使用 Backbone.js 将数据保存到 localStorage

【英文标题】：Unable to save data to localStorage using Backbone.js

【发布时间】：2013-02-24 18:23:15

【问题描述】：

我正在尝试将一些数据保存到 localStorage，同时使用 Backbone.js 框架和 Require.js。

但是，我收到以下错误：

Uncaught Error: A "url" property or function must be specified

有什么可能导致此错误的线索吗？ 一个快速的谷歌透露，必须设置 Backbone.sync，但 localStorage 适配器不是已经为我做了吗？我错过了什么？

这里有一些相关的代码sn-ps：

require.config(
  paths: 
    // Major libraries
    jquery: 'libs/jquery/jquery.min',
    underscore: 'libs/underscore/underscore.min',
    backbone: 'libs/backbone/backbone.min',

    // Require.js plugins
    text: 'libs/require/text',

    // Backbone.js plugins
    localstorage: 'libs/backbone/localstorage.min',

    // Just a short cut so we can put our html outside the js dir
    // When you have HTML/CSS designers this aids in keeping them out of the js directory
    templates: '../templates'
  
);

...

define([
    'underscore',
    'backbone',
    'models/score',
    'localstorage'
], function(_, Backbone, ScoreModel, Store)
    var ScoreCollection = Backbone.Collection.extend(
        model: ScoreModel,
        localStorage: new Store("ScoreCollection")
    );
    return ScoreCollection;
);

...

define([
    'underscore',
    'backbone'
], function(_, Backbone)
    var ScoreModel = Backbone.Model.extend(
    );
    return ScoreModel;
);

-- 编辑--

路线如下：

define([
    'jquery',
    'underscore',
    'backbone',
    'views/scores/list',
    'views/scores/add'
], function($, _, Backbone, ScoreListView, ScoreAddView)
    var AppRouter = Backbone.Router.extend(
        routes: 
            'scores': 'showScores',
            'scores/add': 'addScore',
            '*actions': 'defaultAction'
        
    );

    var initialize = function()
        var app_router = new AppRouter;

        app_router.on('route:showScores', function()
            var scoreListView = new ScoreListView();
            scoreListView.render();
        );

        app_router.on('route:addScore', function()
            var scoreAddView = new ScoreAddView();
            scoreAddView.render();
        );

        app_router.on('route:defaultAction', function()
            console.log('No route');
        );

        Backbone.history.start();
    
    return 
        initialize: initialize
    ;
);

-- 更新--

显然，模型似乎没有链接到集合。因此集合中的 localStorage 集不会应用于模型。在模型上显式设置 localStorage 使其工作。但是有人知道我错过了什么吗？

【问题讨论】：

我们可以看看你的routes吗？

@Mohsen：已编辑以包含路线。谢谢:)

【参考方案1】：

This error 在模型上调用时由 Backbone.sync 的默认实现抛出，并且其 url 函数未定义。 Backbone.sync 被其他函数隐式调用，例如保存模型。

如果您使用的是服务器端存储，则需要在模型上设置一个 url。但是，使用 localStorage，您需要完全覆盖 Backbone.sync 方法，以便保存、更新和销毁函数将转换为 localStorage 适配器上的操作。我没有使用主干 localStorage 插件，但它看起来应该覆盖 Backbone.sync:https://github.com/jeromegn/Backbone.localStorage/blob/master/backbone.localStorage.js#L208

尝试一些健全性检查以确保插件已加载并正在执行覆盖功能。

【讨论】：

我知道 Backbone.sync 问题。但是，backbone-localstorage.js 似乎已经覆盖了它。问题来自于将backbone.localstorage 与require.js 一起使用。

好的。让 localStorage 成为模型定义的依赖项怎么样？

您是否尝试过使用shim？在这种情况下，可能需要覆盖按预期在全局范围内工作。

看看我的编辑。显然，问题似乎在于我的模型与集合没有关联。