How to render a view when model is fetched from multiple urls

I am working in project with backbone.js and the problem I am facing is that I have a model that doesn't need to be in sync with the server, this model its only intended to fetch user data to initialize the rest of the views, it is kind of a wrapper view for the app with a model attached to it.

This model fetch its data from multiple urls and my actual problem is that the view is rendering before all the data is assigned to the model in some cases and in other cases is rendered when all the data is already assigned to the model.

i am using $.when() to fetch the model and calling .done() to render the view but i think i don't understand the concept of the defer object. Would like to know what kind of suggestion you guys have in order to proceed with this problem. I leave you an example on how is my code.


      var userModel = Backbone.Model.extend({
        url: "/api/vacationtypes.json",
        defaults: {
          userName: 'anonymous',
          availableDays: 0,
          vacationType: []

        initialize: function() {
          var that = this;

        parse: function(data){
          return {vacationType:}

        getAvailableDays: function() {
            url: "/api/staffAvailableDays/get/" + + ".json",
            success: this.parseAvailableDays

        parseAvailableDays: function(response) {



  var Home = Backbone.View.extend({
    tagName: "section",
    className: "home",
    el: "#request-form"

    events: {
         // events for the view

    initialize: function(){
      var that = this;
      this.model.on('change:availableDays', this.render, this);
      //  once all fetches for model are done render the view (sometime execute before the succes of getAvailableDays)
      $.when( this.model.fetch(), this.model.getAvailableDays() ).done(function(){

    render: function(){
      var template = _.template(homeViewTemplate, this.model.toJSON());
      // get holydays from db
      //assign total steps after render
      this.totalSteps = $(homeViewTemplate).find('fieldset').length
      // initialize jQuery UI datepicker

      return this;

    // here goes rest of the view methods          


Hope you guys can help me figuring out which one is the best way to wait untill all fetch is done to render.


You need to return the jqXHR (ajax return value) from getAvailableDaysso that it can be used with $.when

getAvailableDays: function() {
  return $.ajax({
    url: "/api/staffAvailableDays/get/" + + ".json",
    success: this.parseAvailableDays

Your existing code passes the return value of getAvailableDays and fetch to $.when. When you don't return anything from getAvailableDays your code is equivalent to the following:

$.when(this.model.fetch(), undefined).done(function() {

Which ignores the ajax call inside of getAvailableDays.

From the jQuery documentation:

If a single argument is passed to jQuery.when() and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately

You will find in the Backbone internals that fetch returns the jqXHR object from the ajax call, similar to what you should be doing with getAvailableDays

Need Your Help

python: Open file, edit one line, save it as the same file

python io

I want to open a file, search for a specific word, change the word and save the file again. Sounds really easy - but I just can't get it working... I know that I have to overwrite the whole file bu...

Post-linker assembly code in GCC

memory gcc assembly linker mips

I am compiling C-programs to elf32-bigmips assembly code, and I have managed to get the assembly output using the following commands (for an example program using O1).