Efficiently caching and locally retrieving Backbone Models

Question

Efficiently caching and locally retrieving Backbone Models

Currently, my focus is on creating a dashboard using backbone and highcharts. In order to display different charts on the front end, I am utilizing a MySQL server as the backend source of all the necessary data.

The approach we are aiming for involves having a Backbone model that can perform a fetch operation, accepting parameters such as dateStart and dateEnd within the data object to retrieve the complete data set.

Upon receiving the data set from the server, the goal is to store it locally for caching purposes. This stored data will be used to graph various elements with Highcharts based on different filters. The data structure returned by the server consists of an array of objects as shown below:

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

Users should have the ability to apply filters like ad_product, geo_code, metric, and environment on the front end. Based on these selections, I aim to query the backbone model data with the specified filters to generate the series array. This array will then be passed to the backbone view containing the Highcharts component.

I am currently exploring the best approach to achieve this functionality. Despite researching, I have not come across a definitive solution that aligns with my requirements effectively. Can anyone provide guidance on how to implement this seamlessly?

javascript backbone.js highcharts

Answer 1

Answer №1

A backbone model acts as a data storage unit. Consider the following code structure for organizing your application:

var UserData = Backbone.Model.extend({
    initialize: function() {
        var user = this;

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

var UserDashboard = Backbone.View.extend({
    initialize: function() {
        var dashboard = this;

        this.model.on('data:error', function() {
            console.log('There was an error loading user data');
        }).on('data:loaded', function() {
            dashboard.render();
        });
    },
    render: function() {
        this.displayCharts();
    },
    displayCharts: function(data) {
        data = data || this.model.toJSON();
        $('#chart-container').highcharts({
            // Chart configurations
        });
    },
    events: {
        'change .filter.type': function(e) {
            var selectedType = $(e.currentTarget).val(),
                data = this.model.toJSON()
            ;
            data = data.filter(function(entry) {
                return entry.type == selectedType;
            });
            this.displayCharts(data);
        }
    }
});

new UserDashboard({
    el: '#dashboard',
    model: new UserData
});

Answer 2

A backbone model acts as a data storage unit. Consider the following code structure for organizing your application:

var UserData = Backbone.Model.extend({
    initialize: function() {
        var user = this;

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

var UserDashboard = Backbone.View.extend({
    initialize: function() {
        var dashboard = this;

        this.model.on('data:error', function() {
            console.log('There was an error loading user data');
        }).on('data:loaded', function() {
            dashboard.render();
        });
    },
    render: function() {
        this.displayCharts();
    },
    displayCharts: function(data) {
        data = data || this.model.toJSON();
        $('#chart-container').highcharts({
            // Chart configurations
        });
    },
    events: {
        'change .filter.type': function(e) {
            var selectedType = $(e.currentTarget).val(),
                data = this.model.toJSON()
            ;
            data = data.filter(function(entry) {
                return entry.type == selectedType;
            });
            this.displayCharts(data);
        }
    }
});

new UserDashboard({
    el: '#dashboard',
    model: new UserData
});

Efficiently caching and locally retrieving Backbone Models

Answer №1

Similar questions

When attempting to use the POST method with a JSON body in Postgresql, I encounter an error

Can Angular 4 experience race conditions?

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

Guide to showcasing an image on an HTML page using HTTP header

Change the height of a <div> element to match the height of the window on a Bootstrap website

Should one consider using the Express app.use() method within an asynchronous callback function?

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

Customize your Shopify Messenger icon using JavaScript!

Laravel's Vue component is experiencing issues with loading Axios response data

Notification for Pinned Tabs Update

Is there a gentle approach to transferring calendar event variables in JavaScript?

Coordinate Array Filtering from Different Coordinate Arrays

Guide to accessing the content within an h1 tag with JavaScript

I recently started exploring the world of creating discord bots using node.js, and I'm currently facing a bit of a challenge with it

Enhance the Facebook Login popup with personalized settings

Ways to include items to various list items (`<li>`)

A password-protected website scraper using Node.js

Using PHP, assign a reference to a class member

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

Issue with React useCallback not recognizing changes in dependencies caused by child functions