Backbone set model inside ajax request

Question

Hi all I have an app in Backbone where inside a function I want to convert price from GBP to EUR for example using a php file called with ajax. In the success function I want to assign the converter data to my object. But seems that not setting this because into the template uin underscore there is always the old value. This is my function inside my model:

toJSON: function() {
        var json = _.clone(this.attributes);

        json.rooms = this.rooms.toJSON();
        _.each(json.rooms, function(room){
            var converter ="<?php echo(site_url('/backend/hotel/ajax_currency')); ?>";
            $.ajax({   
                url: converter, 
                type: "POST", 
                data: {
                        from_currency : room.currency,
                        amount : room.price_adult
                    }, 
                dataType: "json", 
                success: function(data) {
                    console.log(data);
                    room.price_adult =  data;
                }
            });
        });
        return json;
    },

I have also tried:

room.model.set('price_adult',data);

but return me error that don't find model. How can I solve?

ekeren ekeren · Accepted Answer · 2013-07-05T11:17:44

This is not a thing you want to put in toJSON function, I can think of several reason why it should work for you. The most important one is that toJSON function is synchronous and the AJAX response is async. so your render function is happening before you get the response from your ajax.

I would suggest having a Room model that will be responsible for the concurrency, and it's view will render it when ajax has returned and the price_adult is ready.

var Room = Backbone.Model.extend({
    initialize:function(){
        this.convertConcurrency();
    },
    convertConcurrency:function(){
        var model = this;
        $.ajax(....., 
           success:function(data){
               model.set("price_adult", data);
           }
        );
    },
});
var RoomView = Backbone.View.extend({
    initialize: function(){
        this.listenTo(this.model, "change:price_adult", this.render);
        if (this.model.has("price_adult")) this.render();
    },
    .....
});
var Rooms = Backbone.Collection.extend({...})
var RoomsView = // Rooms collection view

This way the view will be rendered only when there is a price_adult ready.

Maybe you should create a model on the client that gather the concurrency information from the server and compute the concurrency conversation by itself, so you will only have one ajax and the model will compute it for you instead of the server.

Backbone set model inside ajax request

1 Answers