Order Levels on Underscore Templates, making sure data form Backbone Collection loads in set order?

Question

I have an Underscore.JS template loading in basic text data from my database. These load into two div tags. But I think (I am not sure here, please correct me if I am wrong), that depending on what table Backbone gets first depends on the order of which these div tags are displayed in.

So (a), I have come up with a answer, I just wanted to know weather or not this was the best way of doing it by 'chaining' (if that is the right way of calling it) the success calls, within the same Backbone View, this loads both divs into the same Underscore template. So this is my code currently,

  var TextEditView = Backbone.View.extend({
    inititalize: function() {
        this.listenTo(this.BasicTextModel, "change", this.render);
    },
    el: $(".BasicTextTemplate"), //Template loader placeholder
    render: function() {
        var that = this;
        var AboutText = new TextAboutCollection(); //Get About page text
        var HomeText = new TextHomeCollection(); //Get Home page text

        HomeText.fetch({
            success: function(Text) {
                var GetHomeTxt = _.template( $('script.BasicText').html(), { Text: Text.toJSON() } ); //Load About text into template
                that.$el.append(GetHomeTxt);
                that.trigger('ChangeTxt', that);
                AboutText.fetch({
                    success: function(Text) {
                        var GetAboutTxt = _.template( $('script.BasicText').html(), { Text: Text.toJSON() } ); //Load About text into template
                        that.$el.append(GetAboutTxt);
                        that.trigger('ChangeTxt', that);
                    } //End of Success Call to AboutText
                }); //End of .fetch for AboutText
        }}); //End of Success & .fetch calls for HomeText
    } //End of render view function
}); //End of TextEditView

The AboutText is only loaded after the success call for hometext fetch is done, right? Even if I do not get this 100%, it does seem to work for now.

And (b), is there a simple way of adding a 'level' or ID to each div tag making sure Underscore loads each tag in the order I want? Or do I have this completely wrong and should load both these Collections into their own view pointing to there own template? If so I do not understand the point of the template? The way I have them now, I only have the one template that I have re-used!

Please if I am wrong, please correct me

Thanks,

Answer 1

EDIT of the EDIT:

model = new Model({_id:id})               
   var fetched = model.fetch();

  // wait for the model to be fetched
  $.when(fetched).then(function(){

     view = new View({model:model})                               
     app.content.show(view)     
  });

from https://stackoverflow.com/a/13601074/2535516

---

EDIT :

This refers about the comment. About building code, i think u refer as organization of a backbone project (correct me if i'm wrong). If so, the way i am doing is write my code by module. A module is basically : a BackboneModel/Collection, View, and underscore template.

Architecture :

   /
        main.js
        About/ 
        -- about.html <-- contains the underscore template
        -- aboutView.js
        -- aboutModel.js
        -- aboutCollection.js
        Menu/
        -- menu.html
        -- menuView.js
        -- menuModel.js
        -- menuCollection.js

And i load it through an AMD lib, mostly require.js

This architecture is a personal, what you will mostly see is :

/
   main.js
   View/
   -- about.js
   -- menu.js
   Model/
   -- aboutModel.js
   -- menuModel.js
   Collection/
   -- aboutCollection.js
   -- menuCollection.js

A good example is the TODOMvc architecture

---

Your code will work, but this is not very readable and will go worse if you'll have to add some fetch :

HomeText.fetch({
     AboutText.fetch({
         Module1Text.fetch({
             Module2Text.fetch({
             });
         });
      });
 });

This is call the pyramid of doom. To avoid this, use promises.

As a note, jquery do promises