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')  
})

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

编辑：我能够将一些草率的代码放在最后一个小步，至少可以工作，多亏了@VLS我会有一个更好的解决方案，但我发布了我使用过的坏代码。< / p>

// 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

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

1 个答案: