Meteor: Lazyload, load after rendering. Best practise

Question

i have a Meteor Application which is very "slow" as there are a lot of API-Calls.

What i try to do is to break apart the loading/calls.

What i just did is:

• i have loading template via iron-router
• i waitOn for the first API-Call has finished
• then i start the next API-calls in the Template.myTemplate.rendered - function

This was already a big benefit for the speed of my Application, but i want to break it up even more as the second call is in fact more like 5-25 API-calls.

So what i try to do now is inside the rendered function is a self-calling function which calls itself as long as there are no more to do and saves the response inside a session. (Until now it just rewrites, but even to this point i can´t get)

    Template.detail.rendered = function(){
//comma separated list of numbers for the API-Call
    var cats = $(this.find(".extra")).attr('data-extra').split(',');
    var shop = $(this.find(".extra")).attr('data-shop');
    var counter = 0;
    var callExtras = function(_counter){
        var obj = {
            categories : [cats[_counter]],
            shop  : shop
        };
        if(_counter <= cats.length){
            Meteor.subscribe('extra', obj,function(result){
                //TODO dickes todo... nochmal nachdenken und recherchieren
                //console.log(_counter);
                Session.set('extra',Extra.find('extra').fetch()[0].results);
                counter++;
                callExtras(counter);
            });
        }

    };
    callExtras(counter);
    Session.set('loading_msg', '' );
};

Now i have again problems with my reactive parts of the app desscribed here - Meteor: iron-router => waitOn without subscribe As i can´t find a proper way to update my client-side per user base collection. Also in the docs it is described the publish method also creates a new collection. (The new document´s ID) here - http://docs.meteor.com/#/full/publish_added

here is the publish from server

    Meteor.publish('extra', function(obj){
    var that = this;
    Meteor.call('extra', obj, function(error, result){
        if (result){
            //console.log(result);
            that.added("extra", "extra", {results: result});
            //that.changed('extra','extra',{results: result});
            that.ready();
        } else {
            //that.ready();
        }
    });
});

So my question is: Is there from scratch a better way to structuring my code means solving the problem somehow different? If not how can i achive it the cleanest way? Because for my understanding this is just strange way to do it.

EDIT:

For example.

Can i do a per-user-collection (maybe only client-side like now) and push data from the server and just subscribe to this collection? But then how can i check when the async API-Call has finshed to start the next round. So the view gets data piece by piece. I am just confused right now.

Answer 1

My fault was simple as i thaught: You don´t need to use subscribe.

I just added "error,result" in the callback of Meteor.call

Only "result" leads to the result is always undefined.

var cats = $(this.find(".extra")).attr('data-extra').split(',');
var shop = $(this.find(".extra")).attr('data-shop');
var counter = 0;
var callExtras = function(_counter){
    var obj = {
        categories : [cats[_counter]],
        shop  : shop
    };
    if(_counter <= cats.length){
        Meteor.call('extra', obj,function(error,result){
            var actual_session = Session.get('extra');
            if(actual_session === false){
                actual_session = [];
            }
            actual_session = actual_session.concat(result);
            Session.set('extra',actual_session);
            counter++;
            callExtras(counter);
        });
    }

};
callExtras(counter);

Then in the template helper

"extra" : function(){
        return Session.get('extra');

    },