Javascript 主干模型缓存和本地获取

我一直在用主干线和高图设计仪表盘。我使用的是后端MySql服务器，它拥有在前端绘制不同内容所需的所有数据

我们在这里尝试遵循的模式是，我将有一个主干模型，我可以在其上执行

获取

，它将在

数据

对象

日期开始

和

日期结束

中接受，并获取整个数据块

现在，一旦我从服务器获得数据块，我希望能够在本地缓存它，并使用Highcharts根据不同的过滤器重新标记不同的内容。下面是一个示例数据blob。服务器返回一个对象数组

{
    "dt": "2015-11-02",
    "ad_product": "product name",
    "environment": "mobile",
    "geo_code": "country name",
    "unique_users": "1",
    "impressions": "1",
    "all_engagements": "1"
  }

用户将能够选择不同的过滤器，如

ad\u product

，

geo\u code

，前端的

metric

和

environment

，基于此，我希望能够使用这些过滤器查询此主干模型数据，并生成

系列

数组，并将其提供给具有highcharts的主干视图

---

有什么好办法吗？我在这里找不到任何好的东西可以让我以一种好的方式来做这件事

主干模型的目的是为您存储数据。以下是您可能希望如何构造代码的示例：

var MyModel = Backbone.Model.extend({
    initialize: function() {
        var model = this;

        $.ajax({
            url: '/my-api-endpoint'
        }).then(function(data) {
            model.set(data);
            model.trigger('data:loaded');
        }).fail(function() {
            model.trigger('data:error');
        });
    }
});

var MyView = Backbone.View.extend({
    initialize: function() {
        var view = this;

        this.model.on('data:error', function() {
            console.log('there was an error getting data');
        }).on('data:loaded', function() {
            view.render();
        });
    },
    render: function() {
        this.renderHighcharts();
    },
    renderHighcharts: function(data) {
        data = data || this.model.toJSON();
        $('#highchart-container').highcharts({
            // highcharts stuff here
        });
    },
    events: function() {
        'change .filter.geo_code': function(e) {
            var geoCode = $(e.currentTarget).val(),
                data = this.model.toJSON()
            ;
            data = data.filter(function(dataPoint) {
                return dataPoint.geoCode == geoCode;
            });
            view.renderHighcharts(data);
        }
    }
});

new MyView({
    el: '#main',
    model: new MyModel
});

---

主干模型的目的是为您存储数据。以下是您可能希望如何构造代码的示例：

var MyModel = Backbone.Model.extend({
    initialize: function() {
        var model = this;

        $.ajax({
            url: '/my-api-endpoint'
        }).then(function(data) {
            model.set(data);
            model.trigger('data:loaded');
        }).fail(function() {
            model.trigger('data:error');
        });
    }
});

var MyView = Backbone.View.extend({
    initialize: function() {
        var view = this;

        this.model.on('data:error', function() {
            console.log('there was an error getting data');
        }).on('data:loaded', function() {
            view.render();
        });
    },
    render: function() {
        this.renderHighcharts();
    },
    renderHighcharts: function(data) {
        data = data || this.model.toJSON();
        $('#highchart-container').highcharts({
            // highcharts stuff here
        });
    },
    events: function() {
        'change .filter.geo_code': function(e) {
            var geoCode = $(e.currentTarget).val(),
                data = this.model.toJSON()
            ;
            data = data.filter(function(dataPoint) {
                return dataPoint.geoCode == geoCode;
            });
            view.renderHighcharts(data);
        }
    }
});

new MyView({
    el: '#main',
    model: new MyModel
});