javascript - 主干模型在本地缓存和获取

Question

我一直在开发带有主干图和 Highcharts 的仪表板。我正在使用后端 MySql 服务器，它拥有在前端绘制不同内容所需的所有数据。

我们在这里尝试遵循的模式是，我将有一个 Backbone 模型，我可以在其上执行 fetch，它将接受 data 对象 dateStart 和 dateEnd 并获取整个数据 blob。

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

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

用户将能够在前端并基于此，我希望能够使用这些过滤器查询该主干模型数据并生成 series 数组并将其提供给具有 highcharts 的主干 View 。

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

Answer 1

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

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