CODEWITHSUNDEEP
javascriptbackbone.js
Arcanis
Arcanis

Reputation: 33

Right way to fetch and retrieve data in Backbone.js

I’m trying to understand how and where to use data after a fetch using Backbone.js but I’m a little confused.
I’ll explain the situation.
I have an app that, on the startup, get some data from a server. Three different kind of data.
Let’s suppose Airplanes, Bikes, Cars.
To do that, I’ve inserted inside the three collections (Airplanes, Cars, Bikes) the url where to get these data.
I’ve overwrited the parse method, so I can modify the string that I get, order it, and put it in an object and inside localstorage. I need it to be persistent because I need to use those 3 data structure.
So with a fetch i get all those data and put them inside localstorage. Is it correct doing it that way?

Now i need to make other calls to the server, like “get the nearest car”.
In the view i need to see the color, name and model of the car, all that informations are inside the object “Cars” in localstorage.
In my view “showcars.view” I just call a non-backbone js, (not a collection, model or view) where i get all the informations i need. In this js i do:

var carmodel = new Car(); //car is the backbone model of the cars
carmodel.url = '/get/nearest/car'; //that give id of the nearest car
carmodel.fetch ({
       success: function () {}
//here i search the Cars object for a car with the same id 
//and get name, color, model and put them in sessionstorage
})

So after that call, in the view I can get the data I need from the sessionstorage. Is that a bad way of doing things? If so, how i should fetch and analyze those informations? I should do all the calls and operations inside the models?
Thanks

Upvotes: 2

Views: 1086

Answers (2)

Tallmaris
Tallmaris

Reputation: 7590

In general, Backbone keeps everything in memory (that is, the browser memory) so there is no need to save everything to local storage, as long as your Collection object is somehow reachable from the scope you are sitting in (to keep things simple let's say this is the global window scope).

So in your case I will have something like three collections:

window.Cars
window.Airplanes
window.Bikes

Now you want the nearest. Assuming you are in a Backbone View and are responding to an event, in your place I would do something like this (just shows the meaningful code):

var GeneralView = Backbone.View.extend({

    events: { "click .getNearestCar": "_getNearestCar" },

    _getNearestCar: function () {

        $.getJson('/get/nearest/car', function (data) {
            // suppose the data.id is the id of the nearest car
            var nearestCar = window.Cars.get(data.id)
            // do what you plase with nearestCar...
        });
    }

});

Upvotes: 1

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

This would be the way that you might implement what you want.

var Car = Backbone.Model.extend();
var Cars = Backbone.Collection.extend({
  model: Car,
  url: '.../cars'
});
var NearestCar = Backbone.Model.extend({
  url: '...nearest/car'
});

var cars = new Cars();
var nearestCar = new NeaerestCar();
cars.fetch({
  success: function() {
    nearestCar.fetch({
      success: function(model) {
        var oneYouWant = cars.get(model.get('id'));
        // do something with your car
        // e.g.:
        // var carView = new CarView({model: oneYouWant});
        // $('body').append(carView.render().el);
      });
    });
  });
});

Upvotes: 1

Related Questions