Best JS-Framework for Asynchronous Image Gallery Loading with MongoDB

Question

So, over the past week I have looked at loading multiple galleries at once. I have been working in MeteorJS with blaze templates but, the methods I am using aren't working.

Essentially, all my data comes from multiple MongoDB collections which are organized in one main collection. When the website starts, I want to access the list of current collections and for each collection display a gallery of photos.

(Main Photo Page)

{{#each collections}}
  {{>gallery collectionName=collectionName}}
{{/each}}

(Gallery Template)

<Template name="gallery">
  {{getPhotos}}
</Template>

I have tried using a reusable blaze template that is fed the data and then runs a helper to display the images. It works, but I am having trouble loading only one template/collection at a time. I want to load one first, when that is done, load the next etc.

I have also wondered about using ReactJS for this with MeteorJS on the backend, but before I start, I'm wondering about how easy is it to load components one by one vs templates?

Thanks for any ideas or help!

Answer 1

You could try merging the cursors in a helper, instead of inside the template. This will force the order you like and still be reactive since the find is in a reactive context (the helper).

(HTML)

<Template name="gallery">
  {{#each getPhotos}}
       <img src="{{this.src}}">
  {{/each}}
</Template>

(js)

'getPhotos':function(){
    let mergedCursor = [];
    for (collectionObject in Template.currentData().collections){
        //not clear how you are getting the collections
        mergedCursor.concat(collectionObject.find().fetch());
    }
    return mergedCursor;
}

You could also import the collections in the same js file and merge them directly.