Question

我一直在使用骨干和高图的仪表板。我正在使用一个后端MySql服务器，它拥有我需要的所有数据来绘制前端的不同内容。

我们在此尝试遵循的模式是，我将拥有一个Backbone模型，我可以在fetch上接受data对象dateStart和{{} dateEnd 1}}并获取整个数据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"
  }

用户可以在前端选择不同的过滤条件，例如ad_product，geo_code，metric和environment，并根据我希望能够使用这些过滤器查询此主干模型数据并生成series数组并将其提供给具有highcharts的主干视图。

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

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

Backbone模型缓存和本地获取

1 个答案: