将数据加载到本地存储一次

Question

我使用的是backbone.js，我需要一种非常简单的方法，只需一次将本地json文件渲染到用户的本地存储中。我正在构建一个cordova应用程序，我只想使用本地存储数据。

我已经在我的收藏中硬编码了一个相当大的.json文件（播放器列表），如果设备上的本地存储为空，我只想将.json文件加载到本地存储中，而在应用程序初始化时，本地存储只有一次。

我可以使用ajax，但我不知道如何编写它，只将数据作为"启动"数据注入一次。因此，如果你知道如何做到这一点，我可以将json文件上传到我的服务器，并以某种方式获取它

如果我完成了一系列任务，我可以注入数据，我必须禁用fetch方法，并在下面的每条语句中呈现此代码，此外json必须以特定格式硬编码到集合中。

playersCollection.create({
  name: player.get('name'),
  team: player.get('team'),
  team_id: player.get('team_id'),
  number: player.get('number'),
  points: player.get('points')  
})

我正在努力完成这个lol，我今晚需要用它来保持统计数据，我几乎完成了结构，当数据加载时，我可以添加统计数据等，但我需要加载数据，我祈祷有人能帮忙！

编辑：我能够在最后一分钟整理出一些草率的代码，这些代码至少起了作用，多亏了@VLS，我会有更好的解决方案，但我会发布我使用的错误代码。

// I fire renderData method on click
events: {
    'click .renderData':'renderData'
},
// Inside my render method I check if "players-backbone" is in local storage
render: function() {
    var self = this;
    if (localStorage.getItem("players-backbone") === null) {
        alert('yup null');
        //playersCollection.fetch();
        this.$el.append('<button class="renderData">Dont click</button>')
    } else {
        alert('isnt null');
        this.$el.find('.renderData').remove();
        playersCollection.fetch();
    }
    this.teams.each(function(team) {
        var teamView = new TeamView({ model: team });
        var teamHtml = teamView.render().el;
        console.log($(''))
        var teamPlayers = this.players.where({team_id: team.get('id')})
        _.each(teamPlayers, function(player) {
            var playerView = new PlayerView({ model: player });
            var playerHtml = playerView.render().el;
            $(teamHtml).append(playerHtml);
        }, this);
        this.$el.append(teamHtml);
    }, this);
    return this;
},
// method that populates local storage and fires when you click a button with the class .renderData
renderData: function() {
    var self = this;
    this.teams.each(function(team) {
        var teamPlayers = this.players.where({team_id: team.get('id')})
        _.each(teamPlayers, function(player) {
            playersCollection.create({
              name: player.get('name'),
              team: player.get('team'),
              team_id: player.get('team_id'),
              number: player.get('number'),
              points: player.get('points')  
            })
        }, this);
    }, this);
    playersCollection.fetch();
    return this;
}

这显然不是最好的方法，但它奏效了，我当时很着急。需要注意的是，你必须点击一个填充数据的按钮，集合是硬编码的，只是总体上不太优雅（但它很有效），应用程序做了它需要的事情。

非常感谢@VLS，我感谢您为解释代码和创建小提琴所做的努力。对不起我来晚了！

Answer 1

您可以扩展您的收藏的fetch方法，并将其与Backbone.localStorage结合使用，因此在您的收藏中您会有以下内容：

localStorage: new Backbone.LocalStorage("TestCollection"),
fetch: function(options) {
    // check if localStorage for this collection exists
    if(!localStorage.getItem("TestCollection")) {
        var self = this;
        // fetch from server once
        $.ajax({
            url: 'collection.json'
        }).done(function(response) {
            $.each(response.items, function(i, item) {
                self.create(item);  // saves model to local storage
            });
        });
    } else {
        // call original fetch method
        return Backbone.Collection.prototype.fetch.call(this, options);
    }        
}

演示：http://jsfiddle.net/5nz8p/

有关Backbone.localStorage的更多信息：https://github.com/jeromegn/Backbone.localStorage