how to render multiple views with their models from ajax calls in backbone

Hey everybody¡ I'm trying to paint a screen with multiple models and associated views in backbone. For this, I have respestive ajax calls to the server, to get data for this vies. First I considered that the solution could be the jquery function $when(ajaxcall1,ajaxcall2)done(function) , but ....

Model1.js
getFById: function (id, context, success, error) {
    this.fetch({
        data: {
            id: id
        }
    }).success(function () {
        success();
    }).error(function () {
        error();
    });
},
parse function data
parse: function (response) {
    response.pedidosEntrega = new App.PedidosbookingCollection(response.datosPedidosbookingDto);
    response.cabeceraBookingDto = response.cabeceraBookingDto;
    return response;
}
model2.js
getFByBooking: function (idBooking, context) {
    return $.ajax({
        async: true,
        context: context,
        cache: false,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json',
        data: {
            id: idBooking
        },
        url: this.datosPorFUrl,
    });
},

And in my router.js have the calls to render the views.

$.when(this.model.getFById(idBooking, idFactura, this),
       this.collectionF1Candidatas.getFByBooking(idBooking))
    .done(_.bind(function (modelBooking, facturasCandidatas) {
        this.asociarF1BookingExito(facturasCandidatas);
    }, this));

The problem is that the function parse in model 1 is asyncronous whith this multiple call, and dont execute in $when sentence. How can do to sincronyze the ajax calls with parse function?

I know that it isnt the best solution for backbone. Could someone tell me a better solution for implements it in this tecnology?

thanks everyone¡¡

Answers


First, pass a success (and error?) callback to the getFByBooking function, to align the interface with the model's getFById function. That way, you can treat them both in the same manner:

getFByBooking : function(idBooking, context, success /*, error*/) {
    $.ajax({
        // ...
        success: success
    });
}

Now, in your router, you can pass the same success callback to them both, but keep it from being called on the first response. You could harness the power of underscore's/lodash's _.after here:

var success = _.bind(function (modelBooking, facturasCandidatas) {
    this.asociarF1BookingExito(facturasCandidatas);
}, this);

// let's tell it to only be invoked on the second call
success = _.after(success, 2);

this.model.getFById(idBooking, idFactura, success /*, error*/);
this.collectionF1Candidatas.getFByBooking(idBooking, idFactura, success /*, error*/);

I don't know if ECMA 6 is available on your client, but if so, you can also use generators to accomplish the same thing, with more elegance. Here's a video that makes it clear as day.


Need Your Help

Structure returned data from mysql_get_assoc

php mysql

I managed to solve my problem with getAll and loop after it. But as I'm not very good with mysql queries and such, I decided to ask you if there's a way to get using getAssoc from table:

ftp file retrieve for unfinished file

java ftp apache-commons

What is the best way for a program which retrieves files from ftp server to check if the file to be downloaded is an ongoing transfer (someone already uploading this file during we decide to downlo...